Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 43

FIGURE 1-29 The polyline rendered with a different color

You also can experiment with the lineCap property, which accepts a few values that control
how the end of the line will render. For example, you can set the lineCap property to round to
give the line a rounded cap. Applying a cap affects the length of the line. The cap is added to
the end of line, and its length matches what you have set for the line's width. In this example,
the line has a width of 5. With a round cap set on the line, the total line length would be
extended by 5.
You've seen all you need to know about working with straight lines. Now turn your
attention to curves.

Drawing curves
Drawing curves is a little more involved because you have more parameters to consider.
Table 1-7 lists the methods used when working with curves on the HTML5 canvas.

TABLE 1-7 Methods for drawing curves

Method Description

A standard arc based on a starting and ending angle and a defined radius

arc

A more complex arc that allows you to control the steepness of the curve quadradicCurveTo

Another complex arc that you can skew

bezierCurveTo

Each drawing method can have styles applied to it, just like the line examples. You can
control the lineWidth , strokeStyle , and lineCap properties to change how your curves display.
Start off by creating some basic arcs on your canvas. The arc method takes the parameters
listed in Table 1-8.