HTML and CSS Reference
In-Depth Information
contextNow.fillStyle = '#261F1E '; // hex value color
contextNow.fillRect(405,20,100,100); // fifth color
contextNow.fill(); // fill all!
</ script >
< style type = ”text/css” >
body {
</ style >
< title > Feel Like a Tortilla! </ title >
</ head >
< body onLoad = ”CanvasMaster.showCanvas()” >
<canvas id = ”totillaHues” width = ”500” height = ”120” > No tortillas for you! Get your
HTML5 browser...pronto! </canvas>
<figcaption> < br />
Tortilla Flat
</ body >
</ html >
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.
Search WWH ::

Custom Search