HTML5 Canvas Tutorial: placing images

Placing an image on the canvas

To insert a photo or picture (image) on the canvas we use the drawImage() method. This method expects an image and a destination point (destX,destY); the position relative to the top left of the canvas

context.drawImage(image,destX,destY);

Example 1: Placing an image on the canvas. See Image 1.

<!doctype html>
<html>
<head>
<script> 
     window.onload = function(){
         var canvas=document.getElementById("picture");	
         var context=canvas.getContext("2d"); 	
         var x = 50;
         var y = 50;
         var figure = new Image();
         
         figure.onload = function(){
         context.drawImage(plaatje, x, y);
         };

         figure.src = "donkey.jpg";
     };
</script>
</head>
<body>	
	<canvas id="picture" style="border: 1px solid;" width="400" height="600"></canvas>
</body>
</html>
Canvas plaatsen image
Image 1. Canvas with an image on it

Check this example in your browser

Adjusting the image size

The dimensions of an image in an HTML Canvas, we can adjust with two additional arguments that we pass on to the drawImage() method: width and height.

context.drawImage(plaatje,X,Y,Width,Height);

Example 2: Placing an image with certain dimensions on the Canvas. See Image 2.

<!doctype html>
<html>
<head>
<script> 
     window.onload = function(){
         var canvas=document.getElementById("picture");	
         var context=canvas.getContext("2d"); 	
         var X = 100;
         var Y = 100;
         var Width = 150;
   		var Height = 200;
         var figure = new Image();
         
         plaatje.onload = function(){
         context.drawImage(figure, X, Y, Width, Height);
         };

         figure.src = "donkey.jpg";
     };
</script>
</head>
<body>	
	<canvas id="picture" style="border: 1px solid;" width="400" height="500"></canvas>
</body>
</html>

Canvas aanpassen afmetingen image
Image 2. Canvas with a picture with certain dimensions.

Check this example in your browser

Cropping the image

We can crop an image by passing 6 additional parameters to the drawImage() method: sourceX, sourceY, sourceWidth, sourceHeight, and Width and Height. These parameters define the position and dimensions of a rectangle which will be used as the cropping area.

context.drawImage(plaatje, sourceX, sourceY, sourceWidth,
	sourceHeight, destX, destY, destWidth, destHeight);

Example 3: Cropping an image on the canvas. See Image 3.

<!doctype html>
<html>
<head>
<script> 
window.onload = function(){
    var canvas = document.getElementById("picture");
    var context = canvas.getContext("2d");
 
    var figure = new Image();
    plaatje.onload = function(){
        // draw the cropped image
        var sourceX = 20;
        var sourceY = 0;
        var sourceWidth = 150;
        var sourceHeight = 220;
        var Width = sourceWidth;
        var Height = sourceHeight;
        var X = canvas.width / 2 - Width / 2;
        var Y = canvas.height / 2 - Height / 2;
 
        context.drawImage(figure, sourceX, sourceY, sourceWidth, 
        					sourceHeight, X, Y, Width, Height);
    };
    figure.src = "donkey.jpg";
};
</script>
</head>
<body>	
	<canvas id="picture" style="border: 1px solid;" width="400" height="500"></canvas>
</body>
</html>

Canvas met bijgesneden image
Image 3. Canvas with cropped image.

Check this example in your browser

More pictures? Use the HTML5 image loader

When we want to place multiple images on the canvas then it is a good idea to preload the images. To ease the loading process, we can best use the special image loader function loadImages(), in which the sources of the images are stored. After that the image loader function creates an object with images and finally, after completing the onload event it calls a function that puts the images on the canvas.

Example 4: Preloading images before placement on the canvas. Also see image 4.

<!doctype html>
<html>
<head>
<script> 
var images = {};
 
function loadImages(pictures, callback){
	var loadedPictures = 0;
	var amountPictures = 0;
	// Determine the amount of images
	for (var src in pictures) {
	    amountPictures++;
	}
	for (var src in pictures) {
	    images[src] = new Image();
	    images[src].onload = function(){
	        if (++loadedPictures >= amountPictures) {
	            callback();
	        }
	    };
	    images[src].src = pictures[src];
	}
}
 
window.onload = function(){
    var canvas = document.getElementById("figure");
    var context = canvas.getContext("2d");
 
    var pictures = {
        donkey: "donkey.jpg",
        coala: "coala.jpg"
    };
 
    loadImages(pictures, function(){
        context.drawImage(images.donkey, 50, 25, 150, 200);
        context.drawImage(images.coala, 250, 25, 150, 200);
    });
};
</script>
</head>
<body>	
	<canvas id="figure" style="border: 1px solid;" width="450" height="250"></canvas>
</body>
</html>

met meerdere images
Image 4. Canvas with multiple images

Check this example in your browser

Next tutorial

Leave a comment