HTML and CSS Reference
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 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
A standard arc based on a starting and ending angle and a defined radius
A more complex arc that allows you to control the steepness of the curve
Another complex arc that you can skew
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.