THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 257

contextNow.fillStyle = '#261F1E '; // hex value color
contextNow.fillRect(405,20,100,100); // fifth color
contextNow.fill(); // fill all!
}
</ script >
< style type = ”text/css” >
body {
font-family:Verdana;
color:#570026;
}
</ style >
< title > Feel Like a Tortilla! </ title >
</ head >
< body onLoad = ”CanvasMaster.showCanvas()” >
<figure>
<canvas id = ”totillaHues” width = ”500” height = ”120” > No tortillas for you! Get your
HTML5 browser...pronto! </canvas>
<figcaption> < br />
Tortilla Flat
</figcaption>
</figure>
</ body >
</ html >

261

h e important parameters in this script are the i rst two in the fillRect() method. h ey're
the x and y positions, and no two squares can be in the same space. h e squares are lined up
in a horizontal row, so all you need to pay attention to is the x-value because the vertical
position is going to be the same.

Once all the fillStyle() and fillRect() methods are laid out, the drawings require
only a single fill() method to display them all. Figure 13-6 shows how the i gure looks on
a mobile Safari browser on an iPhone.

Figure 13-6: Multiple drawings displayed on a mobile browser.