HTML5 canvas - part 3: Images
Tags: javascript, programming, tutorial, canvas
Published: 2018-05-22 08:17:27

---
title: HTML5 canvas - part 3: Images
published: true
description: Third part of a series of articles to dive onto HTML5 canvas. Let's see how to deal with images.
tags: javascript, programming, tutorial, canvas
cover_image: https://thepracticaldev.s3.amazonaws.com/i/jdmy6rw4g3r6t8rxnlur.png
---

# Images

In the [second part](//dev.to/gmartigny/html5-canvas---part-2-state-54np), 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](//developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/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](//developer.mozilla.org/en-US/docs/Web/API/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.

```js
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.

```js
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.

```js
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
```
![drawImage arguments summary](//mdn.mozillademos.org/files/225/Canvas_drawimage.jpg)

> 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.

![Google's tileset](//ssl.gstatic.com/gb/images/i1_1967ca6a.png)

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.

![Tiny planet tileset](//image.ibb.co/jfpeqo/tinyplanet.png)

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

{% codepen https://codepen.io/GMartigny/pen/xjyVKv %}

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](//codepen.io/) and try to reproduce what you see. Or else, find an animation you like on [Dribble](//dribbble.com) and build it with code.

See ya.