THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 255

Now that all the pieces are in place, it needs to be put together in an HTML5 program. h e
following listing ( SimpleSquare.html in this chapter's folder at www.wiley.com/go/
smashinghtml5 ) contains all the script:

<! DOCTYPE html >
< html >
< head >
< script language = ”javascript” >
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“redHot”);
contextNow = canvasNow.getContext('2d');

contextNow.fillStyle = '#cc0000'; // hex value color
contextNow.fillRect(5,20,100,100); // x, y, width, height

contextNow.fill();
}
</ script >
< style type = ”text/css” >
body {
font-family:Verdana;
color:#cc0000;
}
</ style >
< title > Red Square </ title >
</ head >
< body onLoad = ”CanvasMaster.showCanvas()” >
<figure>
<canvas id = ”redHot” width = ”100” height = ”100” > You're missing the Red Square! Get
HTML5, comrad! </canvas>
<figcaption> < br />
Red Square </figcaption>
</figure>
</ body >
</ html >

259

As you can see, the program includes CSS3 and a simple caption along with the appropriate
<figure> and <figcaption> tags surrounding the <canvas> tag. h e results of this
script are shown in Figure 13-5.

Notice that the script also contains a message for non-HTML5 browsers, but because Figure
13-5 shows the canvas image, the browser will not display any content in the <canvas>
container.