Super Duper Simple Animation Using HTML5 canvas element and JavaScript Tutorial

Ok so I have been using codecademy, which is great to get people started on coding but I feel that codecademy needs to stress more going beyond codecademy  to advance coding skills.

Anyways, I still think codecademy is pretty cool and this post is based on a codecademy lesson called "Project: Draw with JavaScript".

The lesson is pretty well described by the title and it teaches people how to use HTML5 and javascript to draw on the screen which is pretty sweet.  So I took the lesson one step further and decided to learn how to do some really simple animations using this mozilla tutorial.

Main Code and Results

Here is what I got:




I am going to go over the animation portions of the code, if you want to learn the other parts I suggest checking out codecademy because it gives a great rundown.  If you are using the right browser you should be able to see that the code is just rotating a square and text on a screen (HTML5 canvas tag is not supported by certain IE browsers).

HTML code

Here is the html code is used by the function:

init() function and JavaScript code

The first part of setting up a animation involves setting up your init() function:


In the init() function it will run whatever functions you put inside and it is also where you want to load any images that you will use in your animation.  It is also where you want to call the function which will be handling the actual animation, in this case  it is setInterval(animationFunction,time in milliseconds).  Also it is important to remember to declare the init() function elsewhere in your script!

JavaScript code for beware() function

Next up is the beware() function, which is used to run the animation.
Many parts of the drawing parts of this function are covered in the codecademy JavaScript drawing lesson so I will not cover them here.

Line by line overview of animation function beware()

The parts which I added to get the animation going are on lines 05, 11, 12, 14, 16 and 25.  This function will be ran through again and again every 120 milliseconds as specified in the setInterval function.

When animating the first step is to clear the screen of everything that is not a static background.  On line 05 this is accomplished by calling the clearRect function which clears the size of the canvas specified in this example in the html code above in the JSfiddle.

Next the save() function is called on line 11 which saves the last drawn state onto a stack.  So in this case it is saving a cleared screen with just the circle drawn onto the stack.

Usually when using javascript drawing function on a 2D canvas the origin (0,0) is the upper left corner of your canvas.  On line 12 this is changed by using the translate(x,y) function and the center of the canvas is made the origin for this example.

In this example the new animations are based on the computer time which is grabbed by making a Date() object.   Date() methods are used in line 16 in the rotate(angle) function to specify a new angle every 120 milliseconds.

On line 25 the restore() function is called which pulls the last saved state off the stack and displays it.

So none of this is done using ActionScript, which for more complicated interactive features might run faster, at least for the time being.  But for simple and quick animations it is a cool feature to include.  Another use might be to make some very simple games if interactivity is integrated.