HTML5 Canvas Animations

October 2012


Step 1: Download the code

All of the code for this tutorial is in one index.html file.

Step 2: Understanding the HTML and CSS

This tutorial will not cover HTML

Step 3: Understanding the Javascript


I think Javascript is an excellent starter programming language for many reasons:

  • Anyone who uses a computer has probably seen a webpage already (100% of people who have read this are online)
  • It is straightforward to read
  • It can accomplish a lot with little understanding

After a tiny amount of HTML setup, a first time programmer can create and customize a canvas animation. In fact, one of the first tutorials I ever followed and understood was this Glazing ribbon screensaver effect in HTML5 canvas on Codepen. I also wanted to write a tutorial for a first time programmer to experiment with.