Animating Many Things on a Canvas

In the Creating a Simple HTML5 Canvas Animation tutorial (say that five times fast!), you learned all about drawing and animating something using the HTML canvas element. More specifically, you learned all about how to draw and animate a single element. Now, there is nothing wrong with that. Not every animation needs to have a lot going on, but you are definitely missing out on the whole canvas experience by not going a little crazy and animating a lot of things.

Take the following animation as an example:

In this example, you have not one, not two, but a hundred blue circles happily moving around to create the final animation that you see.

Knowing how to create animations involving many thing is an important skill for you to learn, for a lot of really cool visualizations revolve around making a lot of things animate in interesting ways. The way you are going to learn all of this is by deconstructing and breaking apart the animated blue circles example you see above.

Onwards!

Pre-requisite Reading

If this is your first foray into creating animations on the canvas, I strongly urge you to read the Creating a Simple HTML5 Canvas Animation and DOM vs. Canvas tutorials first. This deconstruction will assume you are very familiar with the basics covered there. If you’ve never worked with or created objects using JavaScript, you may want to brush up on my Objects and Classes tutorial as well.

With all that said, let’s get started.