Experimenting with the canvas for a basic walk animation

I don’t claim to be an animator, JavaScript array expert, or anything else; I simply wanted to explore the canvas tag in HTML5. In the following article, I demonstrate how to create a simple walking animation using a free sprite that I found on the Internet.

Before I show the solution, I’m going to start with the finished product. Like I stated, it’s extremely basic and not the most overly exciting thing in the world. But from a person who has been creating web applications for 10 years, I found it pretty cool.

Using a sprite with the canvas tag

To accomplish this, you will need a basic sprite image. Here is the one I used:

The above code is by no means optimized and I’ve pretty much hard-coded everything for this sprite. But let’s review the specifics to explain what is happening.

The first thing that is done is a new canvas is created and assigned an id. An image is also loaded and hidden that contains the above sprite. In the Javascript, a reference is obtained to this canvas which is then used to retrieve the drawing context. Once you have the context, you can draw images, shapes, text, etc… with it. In this scenario, I’m drawing an image onto the canvas.

Once the elements are all instantiated in Javascript, I start a basic timer to make the animation move to the left. In this sprite there are 6 pieces to the animation, so once all frames are displayed, the timer is stopped and started again going in the opposite direction. This is repeated endlessly.

Instead the drawFrame* functions, I first clear the rectangle. If this isn’t done, the last frame will stay on the screen – potentially a nice effect, just not in this scenario. Next the drawImage function is called. It accepts 9 parameters and they do the following:

1. The reference to the image to draw
2. The start x position in the image sprite to use
3. The start y position in the image sprite to use
4. The width of the image to pull – in this case each frame is 30 pixels wide
5. The height of the image to pull – in this case each frame is 45 pixels tall
6. The x position of where to draw it on the canvas
7. The y position of where to draw it on the canvas
8. The width of the frame to draw – typically this will match the width of the image to pull for each frame
9. The height of the frame to draw – typically this will match the height of the image to pull for each frame

That is the extent of making a basic animation. The next steps are to remove the hard-coded values and make them all variables. Also, it would be best to attempt to buffer the next frame of the animation in the background and then swap the canvases to avoid a “flicker” effect when there is a background image or other things happening on the canvas.

To accomplish the above here are some of the key functions used:

myCanvas.getContext()
context.clearRect();
context.drawImage();

Converting a sprite image to an animation in HTML5 is as easy as drawing an image on the canvas and adjusting the Difference between location.href and location.replace of where the x, y coordinates of the next frame to display are.