HTML and CSS Reference
In-Depth Information
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
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:
<! DOCTYPE html >
< html >
< head >
< script language = ”javascript” >
//Color Scheme Values pasted here: 8C6E37,BFA380,593723,736055,261F1E
CanvasMaster=new Object();
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
Search WWH ::

Custom Search