HTML and CSS Reference
In-Depth Information
contextNow.shadowColor ='#BFB95A';
pic.src = 'fisherkid.jpg';
</ script >
< style type = ”text/css” >
body {
</ style >
< title > Frame the Photo </ title >
</ head >
< body onLoad = ”CanvasMaster.showCanvas()” >
<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>
</ body >
</ html >
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.
Search WWH ::

Custom Search