The Essential Guide to HTML5

CANNONBALL AND SL INGSHOT

Figure 4-9. Calculating horizontal * vertical displacements

At this point, you may want to skip ahead to read about the implementation of the cannonball applications.

You can then come back to read about what is required for the slingshot.

Drawing line segments

For the slingshot application, I have added a new object type by defining two functions, Sling and

drawsling. My idealized slingshot is represented by 4 positions, as shown in Figure 4-10. Please

understand that we could have done this in a number of different ways.

Figure 4-10. The idealized slingshot

Drawing the slingshot consists of drawing four line segments based on the four points. The bx,by point will

change as I
ll describe in the next section. HTML5 lets us draw line segments as part of a path. We
ve

already used paths for drawing circles. You can draw a path as a stroke or as a fill. For the circles, we

used the fill method, but for the slingshot, I just want lines. Drawing a line may involve two steps: move to

one end of the line and then draw it. HTML5 provides the moveTo and lineTo methods. The path is not

drawn until the stroke or fill method is invoked. The drawsling function is a good illustration of line

drawing.

function drawsling() {

ctx.strokeStyle = this.strokeStyle;

ctx.lineWidth = 4;

ctx.beginPath();