THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 262

{
contextNow.shadowColor ='#BFB95A';
contextNow.shadowOffsetX=10;
contextNow.shadowOffsetY=10;
contextNow.shadowBlur=4;
contextNow.drawImage(pic,10,10);
}
pic.src = 'fisherkid.jpg';
}
</ script >
< style type = ”text/css” >
body {
font-family:Verdana;
color:#736F36;
background-color:#F4F1BC;
}
</ style >
< title > Frame the Photo </ title >
</ head >
< body onLoad = ”CanvasMaster.showCanvas()” >
<article>
<figure>
<canvas id = ”picFrame” width = ”340” height = ”300” > This is one picture you missed
because you don't have HTML5. </canvas>
<figcaption> < br />
Photo with Drop Shadow </figcaption>
</figure>
</article>
</ body >
</ html >

266

Before putting in your own images, check their size and the size that the <canvas> tag has
reserved. In this case, there was enough room for both the image (a photograph) and the
graphic drop shadow. Figure 13-8 shows the results in a Google Chrome browser.

h e color combinations used with the image are important. You'll i nd that some colors work
better than others. h e ones used in Figure 13-8 are a monochromatic set based on the colors
in the image. As you can see, the shadow nicely lit s the photo of the screen.

Compare the image in Figure 13-3 with the one in Figure 13-8. In Figure 13-3, you see what
happens with non-HTML5 browsers; in Figure 13-8, what HTML5 browsers can display. Also,
in this latest use of the same digital photo, the non-HTML5 browsers see only the message
that they're not seeing the image. If you want, you can add the same image and color scheme
without the drop shadow for non-HTML5 browsers.