THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 267

1. Place the pencil at position 40,20 on the grid.

To do this with the canvas DOM, use context.beginPath() and context.
moveTo(40,20) . h is is the starting point.

2. Draw a line from the starting point to about 72, 20 for the top of the briefcase handle.

Use context.lineTo(72,20) for the canvas equivalent.

3. Move the pencil down to about 72, 38.

Use context.lineTo(72,38) for a canvas drawing.

4. Continue in this manner until the outline of the briefcase is complete.

5. When you want to draw the inside of the handle, pick up your pencil, move to where
you want to start drawing the inside of the handle.

With canvas you use context.moveTo(x,y) to begin in a new position and then
use context.lineTo(x,y) to i nish up. However, you do not have to reuse con-
text.beginPath() .

6. In a pencil and pen drawing, as soon as your drawing is complete, you have the
outline of the briefcase. With canvas, you have to include context.stroke() to add the
lines.

When you come to the next-to-last point in your drawing, you can use the context.
closePath() method to go the point you started, and that is used in the program. h e
following script ( SimpleLineDrawing.html in this chapter's folder at www.wiley.
com/go/smashinghtml5 ) provides all the steps.

271

<! DOCTYPE html >
< html >
< head >
< script language = ”javascript” >
//colors: 8C6E37,BFA380
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“simpleDraw”);
contextNow = canvasNow.getContext('2d');
contextNow.beginPath();
contextNow.moveTo(40,20);
contextNow.lineTo(72,20);
contextNow.lineTo(72,38);
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.moveTo(46,26);
contextNow.lineTo(66,26);
contextNow.lineTo(66,38);