HTML and CSS Reference
In-Depth Information
Figure 13-7: Adding a stroke and removing part or all of a rectangle.
264
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
created with JavaScript. Within the method used to create a rendering context, you risk
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()
{
contextNow.drawImage(pic,10,10);
}
pic.src = 'imageName.jpg';
...
 
Search WWH ::




Custom Search