THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 270

contextNow.lineTo(88,38);
contextNow.lineTo(88,78);
contextNow.lineTo(28,78);
contextNow.lineTo(28,38);
contextNow.lineTo(40,38);
contextNow.lineTo(40,20);
contextNow.closePath();
contextNow.fillStyle =”#960”;
contextNow.fill();
contextNow.beginPath();
contextNow.moveTo(46,26);
contextNow.lineTo(66,26);
contextNow.lineTo(66,38);
contextNow.lineTo(46,38);
contextNow.closePath();
contextNow.fillStyle =”#fff”;
contextNow.fill();
}
</ script >
< style type = ”text/css” >
body {
font-family:Verdana;
color:#000;
}
</ style >
< title > Filled Line Drawing </ title >
</ head >
< body onLoad = ”CanvasMaster.showCanvas()” >
<article>
<figure>
<canvas id = ”briefCase” width = ”90” height = ”80” > If you can identify the drawing,
you win a jillion dollars! Oh, I'm sorry . . . looks like you don't have an HTML5
browser. </canvas>
<figcaption> < br />
Picasso Was Here </figcaption>
</figure>
</article>
</ body >
</ html >

274

When you test this revision, the results are pretty close the original drawing. Compare Figure
13-10 and Figure 13-13 to see how close the program-generated image is to the original.

You can use the lines to draw anything that has no curves. In the next section, you'll see how
to add curves to your artistic canvas tools.