HTML5 – Animating in Canvas

2011-02-10

Just for fun, I tried to create animations in canvas, which is one of the new features in HTML5. Canvas is like an empty image object that can be manipulated with JavaScript in order to plot the graphics. There is a good tutorial at MDN, which goes through the basics of how to program graphics in canvas.

In my example, a lot of bubbles are created. They change color as they move around in the canvas. My example shows a simple form of animation, but the same technique can be used todo a lot more advanced animations. Here is the code to my script. There is a link to an executable example at the end of the post.

You can place the following HTML code anywhere on your website. You can tweak the code if you want, but remember to change the width and height at the beginning of the script if you change the values in the canvas-tag.