HTML and CSS Reference
Figure 13-7: Adding a stroke and removing part or all of a rectangle.
IMAGES IN CANVAS AND SHADOWS
One of the fun and simple features of canvas is using it with loaded images. Figure 13-3
shows a typical example of what you can load into a Web page using the <img> tag. Using the
<img> tag is okay, but you can make it far more interesting with the <canvas> tag.
Loading an image into canvas
To load an image, whether it's a GIF, a PNG, or a JPEG, requires an Image object that can be
having your user see a blank where the loaded image goes unless you have an event that lets
you know that the i le has loaded. Fortunately, that's pretty simple to do using the onLoad
event handler, as the following snippet shows:
pic = new Image();
pic.onload = function()
pic.src = 'imageName.jpg';