THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 256

Figure 13-5: Simple canvas drawing
displayed in the Opera browser.

Working with multiple drawings
Now that you see how to create a single drawing, I'll give you a look at creating multiple
drawings. While we're at it, this should also be tested on a mobile device to see how well the
<canvas> tag and JavaScript work in a mobile environment.

h e following script ( Tortilla.html in this chapter's folder at www.wiley.com/go/
smashinghtml5 ) is very similar to the script used to create the red square shown in Figure
13-5. However, when drawing multiple objects, their position becomes more important, as the
following script shows:

260

<! DOCTYPE html >
< html >
< head >
< script language = ”javascript” >
//Color Scheme Values pasted here: 8C6E37,BFA380,593723,736055,261F1E
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“totillaHues”)
contextNow = canvasNow.getContext('2d');

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

contextNow.fillStyle = '#BFA380'; // hex value color
contextNow.fillRect(105,20,100,100); // second color

contextNow.fillStyle = '#593723'; // hex value color
contextNow.fillRect(205,20,100,100); // third color

contextNow.fillStyle = '#736055'; // hex value color
contextNow.fillRect(305,20,100,100); // fourth color