Animating the Canvas - HTML5 Canvas Tutorial for Beginners

This beginner tutorial teaches animation with the HTML5 Canvas API, including requestAnimationFrame, canvas clearing, velocity, bouncing objects, random coordinates, and object-oriented JavaScript. Learners create and animate multiple circle objects within canvas boundaries.

Syllabus

- Animation with requestAnimationFrame
- Clearing the canvas with clearRect
- What is velocity?
- How to bounce our objects off the edges of the screen
- Creating randomization x, y coordinates and dx, dy velocities
- Intro to object oriented JavaScript
- Creating multiple circle objects, and storing them in one variable
- Drawing and animating all of our circles using a for loop, array, and object oriented programming
- How to ensure circles are only being spawned within the canvas's boundaries