Tutorial: Introduction to canvas 3/4



In the second part of this canvas tutorial series, we previously discussed how to draw other shapes than a rectangle on a canvas using paths.

In this third part, we are going to discuss how to draw images on a canvas and how to work with pixels on a canvas.

Color filter application, facial recognition and other image processing application can be done using the following techniques.


First thing first, let us see how to draw images on a canvas. To draw an image on a canvas, we have three methods available:
  • drawImage(image, dx, dy): draws the specified image on the canvas at coordinates (dx,dy) without resizing the image
  • drawImage(image, dx, dy, dw, dh): draws the specified image on the canvas at coordinates (dx,dy) with the width dw and the height dh
  • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh): Here we have the ability to select a rectangle region on the image. This selected region has its top-left corner located at (sx,sy), a width sw and a height sh. This selected region of the image will be drawn on the canvas at the top-left corner coordinate (dx,dy) with a width dw and a height dh


Let us see an example of that:
Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>HTML5 Example: Canvas</title>
<script>
function drawOnCanvas() {
var ctx=document.getElementById("mycanvas").getContext('2d');
var image=new Image();
image.src="poster.jpg";
image.onload=function() {
ctx.drawImage(image,0,190,334,110,0,0,334,110);
}
}
window.addEventListener('load', drawOnCanvas, true);
</script>
</head>
<body>
<canvas width="533px" height="300px" id="mycanvas"></canvas>
</body>
</html>


Now that we know how to draw an image on a canvas, how to get the pixels from the canvas?

The context.getImageData(sx,sy,sw,sh) method gets the image data of a selected region and returns a ImageData object
  • (sx,sy) being the top-left coordinate of the selected region
  • sw and sh being the width and the height of the selected region


The ImageData object contains the width, the height and the data properties.
The data property is a CanvasPixelArray containing pixels informations and each pixel is composed of four channels: the red, blue, green and the alpha transparency channel
Code:

[r1,g1,b1,a1,r2,g2,b2,...,a2,rN,gN,bN,aN]


Be careful, data.length will not give you the number of pixels since the array has four channels for each pixel! data.length/4 will give you the number of pixels.

This is, for instance, how we would create a red color filter:
Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>HTML5 Example: Canvas</title>
<script>
//Work on a canvas
function drawOnCanvas() {
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext('2d');
var image=new Image();
image.src="poster.jpg";
image.onload=function() {
//We have to draw the image on the canvas so we can get the image data later
ctx.drawImage(image,0,0);
//Here we get the image data from the whole canvas area
var pixels=ctx.getImageData(0,0,canvas.width,canvas.height);
for (var i = 0, n = pixels.data.length; i < n; i += 4){
pixels.data[i+0] = 255 - pixels.data[i+0]; //Red channel
pixels.data[i+1] = 0; //Green channel
pixels.data[i+2] = 0; //Blue channel
}
//We have to put the pixels back in the canvas if we want to see the result by using putImageData
ctx.putImageData(pixels,0,0);
}
}

window.addEventListener('load', drawOnCanvas, true);
</script>
</head>
<body>
<canvas width="533px" height="300px" id="mycanvas"></canvas>
</body>
</html>


We will see in the fourth and last part of this canvas tutorial series how to use transformations on a canvas like translations, rotations and scaling.

Cheers!
Published December 29, 2010