Creating Vector Masks with HTML5 Canvas Element
With the canvas element present in HTML5, a lot of interesting things such as games, video effects and graphs etc can be created. It can also be used to produce some slightly less complex effects, like manipulating images on the page. In this tutorial we would use the canvas element to create vector masks and use them to modify images. For this purpose, first we need a canvas tag in our page:
|
1 |
<canvas id="c" width="200" height="158"></canvas> |
This just sets up a simple canvas with the width and height of our image. We have chosen these dimensions so that it does not take up any more space than is needed. Next in JavaScript we will get the canvas and its drawing context in JavaScript:
|
1 2 |
var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d') |
So now we are ready to begin drawing our image into the canvas.
We have our canvas set up, now we need to draw the image into that canvas. We can do this easily, but we need an HTML img element with our image in order to draw it. We could grab an <img> tag from our page, but we can do it using JavaScript.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Create an image element var img = document.createElement('IMG'); // When the image is loaded, draw it img.onload = function () { ctx.drawImage(img, 0, 0); } // Specify the source (src) to load the image img.src = "http://i.imgur.com/gwlPu.jpg"; |
Here we are creating a new element for our image. Since we can’t draw the image until it has been downloaded, we need to wait for onload to draw it. Inside of the onload listener, we call the ctx.drawImage(), and pass it the img element. We also pass 0, 0 meaning we want to draw 0 pixels from the top and left.
In the canvas, we can use a technique called clipping. We can use a path we define to specify that future operations should only affect the area within the path. Since the canvas is transparent, if we create a clipping path, and then draw the image, the image will only show up inside the shape of that path. So let’s draw a circle, clip to that path, and draw the image:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// Create an image element var img = document.createElement('IMG'); // When the image is loaded, draw it img.onload = function () { // Save the state, so we can undo the clipping ctx.save(); // Create a circle ctx.beginPath(); ctx.arc(106, 77, 74, 0, Math.PI * 2, false); // Clip to the current path ctx.clip(); ctx.drawImage(img, 0, 0); // Undo the clipping ctx.restore(); } // Specify the source (src) to load the image img.src = "http://i.imgur.com/gwlPu.jpg"; |
You may notice the ctx.save() and ctx.restore() calls. This is because anything we try to do to the canvas after we clip it will only work within the clipping region. We call save() before we clip and then call restore() after, and the state of the canvas will be restored to before the clipping was applied. Everything you drew will remain, but the clipping definition will be gone. So the entire thing can also be done without clipping, but clipping can be used to further enhance the beauty of the overall effects.
BlueHost | HostGator | Media Temple
