(click anywhere to close)

[Canvas] Images

category: Website | course: Canvas | difficulty:

Using images within canvas is not as straightforward as you’d expect from HTML. But, just as with text, it’s even more complex if you were to overlay your canvas with HTML images, which is why I recommend learning how to use images within canvas.

Everything described in this chapter requires an image to be present on the server the code is hosted on. If you use links to external images (hosted on other servers), you get a security error.

To display an image, you need to load it, then wait for it to load, and only once it’s retrieved you can display it. Let’s look at how this plays out in code:

var imageObj = new Image(); imageObj.onload = function() { //draw actual image } imageObj.src = “linkToImage”;

All it does is load an image object, point it to an image, and attach an event listener that executes once it has loaded.

Actually Drawing the Image

To draw the image, you only need to use a single method. This method, however, has quite a lot of parameters:

drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, X, Y, Width, Height)

The last four parameters are what determine the position and size of the image within the canvas.

The parameters with source in front are used to crop the original image.

var imageObj = new Image();
imageObj.onload = function() {
	//Cropped version
	ctx.drawImage(imageObj, 10, 10, 20, 20, 40, 40, 20, 20);
	//Full version
	ctx.drawImage(imageObj, 0, 0, 40, 40, 80, 40, 40, 40);
imageObj.src = 'image.png';

Changing Images: Pixel by Pixel

While most graphical programming languages gives us filters to modify images, the canvas gives us something more fundamental: we can access every pixel individually and change it. To access a certain rectangle of the canvas (which can contain anything), use

getImageData(x, y, width, height).data

This returns the pixel data within that rectangle as an array. This array starts at the upper left corner, and works through all pixels row by row. Every pixel has 4 elements within the array; one for the red, blue, green and alpha channel, respectively. We can just loop through this data array like we’d loop through any array, and assign new values (between 255 and 0) to every element.

Then, we can put this new pixel data back into the canvas with

putImageData(data, x, y)

Normally, you’d use the same x and y  coordinates you used when getting the data, as you want to replace the same rectangle you extracted from the canvas.

Example that inverts the image you just saw about how to crop images.
function drawInverted(imageObj) {
    var x = 10;
    var y = 10;

    //Draw original image
    ctx.drawImage(imageObj, x, y, 225, 100);

    //Access current pixel data
    var imageData = ctx.getImageData(x, y, imageObj.width, imageObj.height);
    var data = imageData.data;

    for(var i = 0; i < data.length; i += 4) {
      data[i] = 255 - data[i];
      data[i + 1] = 255 - data[i + 1];
      data[i + 2] = 255 - data[i + 2];

    //Overwrite original image
    ctx.putImageData(imageData, x, y);
var imageObj = new Image();
imageObj.onload = function() {
imageObj.src = 'image.png';

Saving Images: Data URLs

Last but not least, there might be times when you want to save or copy the contents of a canvas. To do so, you need to convert a canvas to an image, and canvas uses PNG images for that. These are just strings of characters saved in a file, which means all we need to do to save an image, is get the string or data URL that represents it. To access this data URL of a canvas context, use


This is the only method that works on the canvas itself, not the drawing context - we're not drawing anything, just accessing the canvas as a whole.

ctx.fillStyle = 'red';
//Should show the string of characters the makes up this specific canvas in the console:
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk