HTML5 canvas - part 3: Images

In the second part, we used transformation give life to our rectangle. However, it was still a black rectangle ... not that awesome.
You can draw images onto canvas easily with drawImage, so let's try that.

drawImage

There's 3 ways to call the drawImage method - with 3, 5 or 9 arguments. Yeah, 9 arguments, but don't be scared, it makes sens when you will get it.
The first argument is always the image data to draw. It can be under different form, but the easiest way is to pass an HTMLImageElement like any HTML DOM image element.

1. 3 arguments

Then, the two next arguments will be the x and y coordinates of the draw. The image will be drawn at these coordinates with the same size as the source.

drawImage(image, x, y);

2. 5 arguments

Same as previous way, it just have two more arguments for the destination's width and height. In other words, it allow you to scale the image before drawing it.

drawImage(image, x, y, width, height);

3. 9 arguments

This time, things change a little. First one is image's data as always. Then, there's 4 arguments for source x, y coordinates, width and height. And again, 4 for destination x, y coordinates, width and height.

I think, this is clear when looking at the summary from MDN.

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Why load an image if you don't use all of it though ? You can just crop it with GIMP ?

Well, the main use-case that come to my mind is working with tileset. Tilesets are images resulting of the concatenation of many smaller images. Mainly used in games, allow you to load only one big image instead of many smaller one, simplifying the process.

A quick search on Google, returns a lots of examples. Even Google itself use one.

The idea is to use the same image everywhere and just target the part you need.

So, I created a simple tileset with frames of a gif animation.

We're going to draw each frame after another using the "9 arguments" call.

example of animation with image

Isn't he cute ?

If you look at the code, not much have changed. I load a new Image with an URL and then draw it with parameters from a getFrame function. This function return the sx, sy, sWidth, sHeight part. Finally, I attach a listener to the "load" event of the image to start looping.

Going further

There, you should now have all the tools to use canvases in your web pages and create all kind of animations and interactions. Using shapes, transformations and images, you can build a wide range of visual effect.
So, be smart, be creative and be curious.

To close this series, I will share some useful tricks when working with canvases (soon).
In the meantime, spent some time on CodePen and try to reproduce what you see. Or else, find an animation you like on Dribble and build it with code.

See ya.