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:
Let us see an example of that:
Now that we know how to draw an image on a canvas, how to get the pixels from the canvas?
The
The
The
Be careful,
This is, for instance, how we would create a red color filter:
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!
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 specifiedimage
on the canvas at coordinates (dx
,dy
) without resizing the image -
drawImage(image, dx, dy, dw, dh)
: draws the specifiedimage
on the canvas at coordinates (dx
,dy
) with the widthdw
and the heightdh
-
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 widthsw
and a heightsh
. This selected region of the image will be drawn on the canvas at the top-left corner coordinate (dx
,dy
) with a widthdw
and a heightdh
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
andsh
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!