Tutorial: Introduction to canvas 3/4
»
Tutorial: Introduction to canvas 3/4
Posted on Dec 29, 2010
(2 years ago).
Seen 955 times.
No comments.
Member since Apr 9, 2010
Location: San Francisco
Stream Posts: 14
Location: San Francisco
Stream Posts: 14
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 specifiedimageon the canvas at coordinates (dx,dy) without resizing the image -
drawImage(image, dx, dy, dw, dh): draws the specifiedimageon the canvas at coordinates (dx,dy) with the widthdwand 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 widthswand a heightsh. This selected region of the image will be drawn on the canvas at the top-left corner coordinate (dx,dy) with a widthdwand 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 -
swandshbeing 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!
Comments
Be the first one to post a comment!
