HTML5 Canvas: Images

Creating and Loading Images
Scaling the Image
Drawing Parts of Images

Jakob Jenkov
Last update: 2024-08-03

The HTML5 canvas has options for drawing images onto it. You do so using the various drawImage() functions on the 2D Context object. There are three different drawImage() functions:

drawImage(image, dx, dy);
drawImage(image, dx, dy, dw, dh);
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

The first parameter, image, is the image to draw. How to create and load an image is explained later in this text.

The dx and dy parameters are short for "destinationX" and "destinationY". These parameter determine where on the canvas the image is drawn.

The dw and dh parameters are short for "destinationWidth" and "destinationHeight". These parameters determine the size to scale the image to when drawing it.

The sx and sy parameters are short for "sourceX" and "sourceY". These parameters determine from where in the source image to start copying a rectangle of the image onto the canvas.

The sw and sh parameters are short for "sourceWidth" and "sourceHeight"

Creating and Loading Images

Before you can draw an image on the canvas you need to create an Image object, and load the image into memory. Here is how that is done in JavaScript:

var image = new Image();
image.src = "http://jenkov.com/images/screenshots/tutorials-screenshot.png";

Before you can draw the image, the image must be fully loaded. To determine if an image is fully loaded, you attach an event listener to the image. This event listener is called when the image is loaded. Here is how that looks:

image.addEventListener('load', drawImage1);

The drawImage1 parameter is a function that is called when the event fires.

Here is a full code example that creates, loads and draws an image on a canvas:

window.onload = function() {
    drawEx1();
}

var image1 = null;

function drawImage1() {
    var canvas  = document.getElementById("ex1");
    var context = canvas.getContext("2d");

    context.drawImage(image1, 10, 10);
}

function drawEx1() {
    image1 = new Image();
    image1.src =
        "https://jenkov.com/images/java-concurrency/java-concurrency-video-screenshot-small.jpg";
    image1.addEventListener('load', drawImage1);
}

Here is the result of the above code when drawn on a canvas:

Scaling the Image

As mentioned in the beginning of this text, you can scale the image when you draw it. Here is a code example that draws an image and scales it to a width of 200 and a height of 100 pixels:

var width  = 250;
var height = 100;
context.drawImage(image2, 10, 10, width, height);

Here is how the image looks when drawn on a canvas, with the scaled width and height:

Drawing Parts of Images

It is possible to only draw a part of an image onto a canvas. The part drawn is a rectangle copied from the image. Here is code example:

var dx = 10;
var dy = 10;
var dw = 75;
var dh = 75;
var sx = 20;
var sy = 20;
var sw = 75;
var sh = 75;

context.drawImage(image3, sx, sy, sw, sh, dx, dy, dw, dh);

The sx, sy, sw and sh parameters declare from where (sx,sy) in the image the rectangle starts, and the width (sw) and height (sh) of the rectangle.

Here is what the rectangle of the image looks like when drawn on a canvas:

Next: HTML5 Canvas: Composition

Tweet
	Jakob Jenkov