The Canvas element was introduced a few years ago as part of the HTML 5 standard. This element has opened the doors to incredibly dynamic web applications that in the past were only possible using 3rd party plugins like Flash or Java. This tutorial covers a small but important piece of the canvas element – displaying and manipulating images.
Image Source
The most common way to draw images to a canvas element is to use a Javascript Image object. Which image formats are supported is dependent on the browser, however the typical formats (png, jpg, gif, etc) have very good cross-browser support.
The image can either be grabbed from an existing element already in the DOM or a new one can be constructed on demand.
var myImage = document.getElementById(‘myimageid’);
// or create a new image.
myImage = new Image();
myImage.src = ‘image.png’;
In the current version of most canvas-supported browsers, drawing an image that hasn’t been fully loaded simply doesn’t do anything. This means, however, that if you want the image to show up, you must wait for it to be loaded before drawing it. This can be done by using the Image object’s onload function.
myImage = new Image();
myImage.onload = function() {
// Draw image.
}
myImage.src = ‘image.png’;
For the rest of my examples, the source image I’ll be using is the following 256×256 gorilla.
Basic Drawing
For the most basic form of drawing images, all that’s required is the position (x and y coordinates) of where you’d like to put the image. Images are positioned relative to their top-left corners. With this technique, images are simply displayed at their original size.
var ctx = canvas.getContext(‘2d’);
ctx.drawImage(myImage, 50, 50);
ctx.drawImage(myImage, 125, 125);
ctx.drawImage(myImage, 210, 210);
Resizing and Scaling
To change the size of the image, an overloaded version of drawImage is used that accepts the desired width and height.
var ctx = canvas.getContext(‘2d’);
ctx.drawImage(myImage, 50, 50, 100, 100);
ctx.drawImage(myImage, 125, 125, 200, 50);
ctx.drawImage(myImage, 210, 210, 500, 500);
This example demonstrates drawing an image smaller than the source, stretched to a different aspect ratio, and blown up larger than the source.
Slice and Crop
The last variant of drawImage allows you to take a slice out of (or crop) the source image.
sourceX,
sourceY,
sourceWidth,
sourceHeight,
destX,
destY,
destWidth,
destHeight)
There’s a lot of parameters there, but basically you’re taking a rectangle out of the source image and drawing that rectangle into a destination rectangle somewhere on the canvas.
var ctx = canvas.getContext(‘2d’);
ctx.drawImage(myImage, 0, 0, 50, 50, 25, 25, 100, 100);
ctx.drawImage(myImage, 125, 125, 100, 100, 125, 125, 150, 150);
ctx.drawImage(myImage, 80, 80, 100, 100, 250, 250, 220, 220);
That does it for all the basic ways to draw and manipulate images using the HTML 5 canvas. Drawing images is a small part of what the canvas provides, and we’ll be posting more tutorials in the future that covers more of this element and its features. If you’ve got any questions or comments, feel free to leave them below.
Want to learn more? Check out these great HTML 5 Canvas books: