Using Canvas to Make Photos into Shapes
This topic explains how you can use HTML5 Canvas to put photographs into different shapes and create visual special effects for web designs.
- Canvas Code Sample
- Canvas Code Sample Discussion
- Body Code
- Script Code
- Code Requirements
- Related topics
This topic includes a stand-alone annotated code sample that shows how to put a photograph of an American Kestral falcon into a circle shape. The code sample demonstrates how to use Canvas to load the falcon photograph and display it on the screen. Then it shows how to create a circle by using the Canvas arc method and add a white circular frame around the bird. The discussion material at the end of this sample will explain more about how the code works to develop this technique.
This discussion explains the design and structure of this Canvas code sample and how all the parts work together. The sample uses a standard HTML5 header, <!doctype html>, so that browsers can distinguish it as part of the HTML5 specification. This code is divided into two major parts:
- Body Code
- Script Code
The body tag uses the onload function to call the displayImage function when the page is loaded. An original image of a kestral is loaded into the body so you can compare it to the one that will be modified by Canvas. The canvas tag is part of the body. The initial width and height of the Canvas is specified, as is the id attribute. The ID is required so that the canvas element can be added to the object model of the page.
The script code includes two functions: displayImage and getColorData. The displayImage function is called when the page is loaded. The getColorData function is called from displayImage. A global variable is created at the beginning of the script section to create an empty image file, which will be used later.
This function is called on page load. It gets the canvas by using the ID of the canvas element in the body code. It then gets the CanvasRenderingContext2D object of the canvas, making it ready to accept drawing and uses DrawImage to load the image into the context. After the context is initialized as a 2-D canvas, you can start drawing on the canvas.
The last thing the function does is to specify the source of the image by supplying a path. Because images might not load instantly, an event is set up that will call a function when the image actually gets loaded. After the image is loaded, it is displayed and a call is made to the changeImage function, which finishes the drawing work.
The image is modified by drawing a circle around the center of the image, by using the arc method. The image is 200 × 200 pixels, and the radius of the circle will be 150 pixels. Because the circle's center is at the center of the image, and the circle border is 100 pixels thick, the pixels on the outer edges are replaced with white ones. The strokeStyle property, lineWidth property, beginPath method, arc method, closePath method, and stroke method define the circle.
This code runs in Windows Internet Explorer 9. It does not work in earlier versions of Windows Internet Explorer but might run in other browsers that support HTML5 Canvas.