Sprite Sheets. Reloaded. Canvas Style

Last post I showed how to animate a sprite sheet using a jquery plugin spritely. The technique essentially moved the css background-position property to show the animation. Today we are going to show a technique that will be one step better. We are going to do the same animation using the HTML 5 canvas tag and no jquery at all! Note: If you need info on how to create a sprite sheet visit the last post for more details…


So what is canvas? Think of canvas just like the name says. It’s a big drawing canvas that we can draw lines, shapes, images, and videos on. However remember everything is bitamp based. It is very similar to if you have used the BitmapData class within Flash. This basically means once we draw to the canvas we cannot get object information back since it is now just a drawing full of pixels. However, for our purposes this is fine since we will be clearing the canvas and redrawing each time we update our robin animation.

Let’s get it started!

First we need to add the canvas tag. The h1 message is an alternative the user will see if their browser does not support canvas. Cough. IE < 9. Fail... Anyway there is a special function we can call on canvas called drawImage. The syntax is as follows.

Let’s break down what this function does. It takes in an image, x pos, y pos, height and width and draws it to the canvas. By changing the x and y position we can move our image around on the canvas. By setting the height and width to one “frame” within the image we can make it look like an animation. Let’s see a diagram.

Changing the x and y position properties of the drawImage function we can move the window region that we want to animate. Let’s take a look at the whole draw function.

Ok let’s highlight some of the features of the draw method. You can see we are doing a clearRect() each time right before the draw image. Think of it like an etch-a-sketch. Canvas would keep the past drawings if we did not clear it each time. The rest of this method is calculating frames based on the time elapsed and the FPS to position x and y and draw. Neato! One other small note. We are using the requestAnimationFrame shim to call this draw function and NOT setInterval(). If you need more info on why go to Paul Irish’s blog post.

Let’s ACTUALLY get it started…

To start drawing to the canvas we need to call the draw method repeatedly. To do this we will create another method called tick. This method will call draw and then call the requestAnimFrame shim which will in turn call tick again when the browser is ready. The result is a solid animation loop.

Finally here is the result.

The benefits of this method may not seem immediately obvious. However, using the other method we are updating the css background property continuously which means we are touching the dom over and over. By using the drawImage method with canvas we can have an animation that will preform much better when used to create games or multiple animations.

Leave a Reply

Your email address will not be published. Required fields are marked *