Images

Contact Us or call 1-877-932-8228
Images

Images

You can add existing images to your drawing with the drawImage() method, which is overloaded and has two signatures:

drawImage(image, x, y, width, height) //basic drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) //sprites

In both cases, you need an image object as the first parameter. You can grab an image from the page (e.g., using document.getElementById('my-image')) or you can create an image object using JavaScript:

var img = new Image(); img.src = 'images/my-image.gif';

It is generally a good idea to hold off trying to display the image in your drawing until you are sure that it has loaded. So, you should wrap your drawing code as shown below:

img.onload = function() { context.drawImage(/*signature*/); }

Let's look at the different signatures now.

drawImage() - Basic

The basic signature simply places the image at a given x,y position on the canvas. The width and height parameters are optional and are used for scaling or distorting the original image (generally a bad idea).

drawImage() Parameters (basic)
Parameter Description
image Image object
x x position on canvas
y y position on canvas
width width of canvas
height height of canvas

Here is a simple example:

Code Sample:

html5-canvas/Demos/image-basic.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
	if (canvas.getContext) {
		var context = canvas.getContext("2d");
		var logo = new Image();  
		logo.src = 'Images/logo.png';
		logo.onload = function() {  
			context.drawImage(logo,50,50); 
		} 
	}
---- C O D E   O M I T T E D ----

This will render as follows: HTML5 Training Image

drawImage() - Sprites

A sprite is an image file that contains several graphics used on a web page. By showing different parts of the sprite in different locations, it appears that there are several different images, but they are all contained in a single file, which translates to a single (faster) download.

To get this to work, we have to specify which part of the image (the source) we want to show and where (and how large) we want it to appear on the canvas. The table below shows the parameters the drawImage() method takes to create sprites.

drawImage() Parameters (sprites)
Parameter Description
image Image object
sx X position of image (source)
sy Y position of image (source)
sWidth width of source (from X pos)
sHeight height of source (from Y pos)
dx X position of canvas (destination)
dy Y position of canvas (destination)
dWidth width of destination (for scaling)
dHeight height of destination (for scaling)

Take a look at the following example:

Code Sample:

html5-canvas/Demos/image-sprite.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
var img;
window.addEventListener("load",function() {
	img = new Image();  
	img.src = 'Images/evolution.gif';
	draw();
},false);

function draw() {
	var canvas=document.getElementById("my-canvas");
	if (canvas.getContext) {
		var context = canvas.getContext("2d");
		img.onload = function() {  
			context.drawImage(img, 10, 10, 60, 140, 60, 20, 60, 140);
			document.getElementById("btnEvolve").disabled=false;
		} 
	}
}

function evolve(pic) {
	var pics = [
		{
			"sx" : 10, "w" : 60,
		},
		{
			"sx" : 74, "w" : 66
		},
		{
			"sx" : 143, "w" : 60
		},
		{
			"sx" : 217, "w" : 55
		},
		{
			"sx" : 270, "w" : 55
		},
		{
			"sx" : 324, "w" : 70
		}
	];
	var canvas=document.getElementById("my-canvas");
	if (canvas.getContext) {
		var context = canvas.getContext("2d");
		context.clearRect(0,0,200,200);
		context.drawImage(img, pics[pic].sx, 10, pics[pic].w, 140, 60, 20, pics[pic].w, 140);
	}
	if (pic < 5) {
		setTimeout(function() {pic++; evolve(pic); }, 250);
	}
}
---- C O D E   O M I T T E D ----

This page loads a single image (shown below with a grid overlay): Evolution Image with Grid Overlay

When the image loads, we show the first character in the image and enable the evolve button, so we can call the evolve() function, which recurses (calls itself) every 250 milliseconds passing on the next index of the pics array, which stores the X position of image (sx) and the width (w) for both the source and destination.

Next