Canvas Games: Part I - HTML5 Canvas - page 639

context . lineTo ( 9 , 0 );

context . stroke ();
context . closePath ();

}

DRAWING WITH PATHS

As a refresher on drawing with paths, review the following steps:

1. Always start a new path with the context.beginPath() function call.

2. Set context.strokeStyle() before starting to draw the path.

3. Use a combination of the context.moveTo() and context.drawTo() stroke commands to
paint the path lines.

4. End the drawing with the context.stroke() call, and close off the path with con-
text.closePath() .

We are drawing to the upper-left corner of the screen, starting at 0 , 0 . Figure 8-3 shows what
this will look like.

Figure 8-3. The player ship on the canvas

The ship with thrust engaged (frame 2)

Now let's take a look at the second frame of animation for the player ship, which is shown in
Figure 8-4 .