THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 251

We could write something more sophisticated, but the message is the message, so let's leave
well enough alone. If you've got an HTML5 browser, everything is Jake. If not, the user i nds
out why not in a message. (You may want to i ne-tune the message for your audience — from
Jane Austen to Ivan the Terrible.)

Before we get rolling on creating your own drawings, let's look at one more way that you can
keep out of hot water with non-HTML5 users. In addition to adding text, you can add photos
or anything else in the <canvas> container. For example, the following script ( Canvas-
Photo.html in this chapter's folder at www.wiley.com/go/smashinghtml5 ) provides
an alternative to a more sophisticated presentation of a photo image using canvas .

<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
body {
font-family:Verdana, Geneva, sans-serif;
background-color:#060;
color:#0FC;
}
img {
padding-top:10px;
padding-bottom:10px;
}
</ style >
< meta http-equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Fisherkid </ title >
</ head >
< body >
< body onLoad = ”CanvasMaster.showCanvas()” >
<canvas id = ”photo” width = ”300” height = ”272” > Gentle viewer, if you see this message,
that means (alas) you don't have an HTML5 browser. (But you can see the photo and
caption.) < br >
<figure> < img src = ”fisherkid.jpg” width = ”300” height = ”272” alt = ”kid fishing” />< br >
<figcaption> Kid Fishing </figcaption>
</figure>
</canvas>
</ body >
</ html >

255

Not only will the non-HTML5 viewer get the message about updating his browser, but he'll
get it in the style described in CSS3. He'll also be able to view both the picture and the
caption, as shown in Figure 13-3.

If you do use an HTML5 browser, the preceding program presents a big blank green screen
with nothing on it. So, be sure that if you're using an alternative for non-HTML5 browsers,
you have something actually in canvas .