Cannonball and Slingshot - The Essential Guide to HTML5 - page 107

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 Ill describe in the next section. HTML5 lets us draw line segments as part of a path. Weve
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();