THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 264

www.wiley.com/go/smashinghtml5 ) adds the image i rst and then draws the rectangle
object on top of it with a transparent i ll color.

<! DOCTYPE html >
< html >
< head >
< script language = ”javascript” >
//colors: F26A4B,F2D091=rgb(242,208,145)
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“filterFrame”);
contextNow = canvasNow.getContext('2d');

pic = new Image();
pic.onload = function()
{
contextNow.drawImage(pic,0,0);
contextNow.fillStyle = 'rgba(242, 208, 145, .6)';
contextNow.fillRect(0,0,472,306);
contextNow.fill();
}
pic.src = 'dance.gif';
}

268

</ script >
< style type = ”text/css” >
body {
font-family:Verdana;
color:#F26A4B;
background-color:#F2D091;
}
</ style >
< title > Filtering Images </ title >
</ head >
< body onLoad = ”CanvasMaster.showCanvas()” >
<article>
<figure>
<canvas id = ”filterFrame” width = ”472” height = ”306” > Not only do you miss the
filtered image, but you miss the dance! Get an HTML5 browser! </canvas>
<figcaption> < br />
Filtered Image </figcaption>
</figure>
</article>
</ body >
</ html >

Notice that the sequence i rst loaded the image and then placed the drawing on top using the
following snippet: