HTML and CSS Reference
The lineCap is the end of a line drawn on the context. It can be one of
The default; a flat edge that is perpendicular to the edge of the line.
A semicircle that will have a diameter that is the length of the line.
A rectangle with the length of the line width and the width of half the line width
placed flat perpendicular to the edge of the line.
The lineJoin is the “corner” that is created when two lines meet. This
is called a join . A filled triangle is created at the join, and we can set its basic properties
with the lineJoin Canvas attribute.
The default; an edge is drawn at the join. The miterLimit is the maximum allowed
ratio of miter length to line width (the default is 10).
A diagonal edge is drawn at the join.
A round edge is drawn at the join.
The lineWidth (default = 1.0) depicts the thickness of the line.
The strokeStyle defines the color or style that will be used for lines and around shapes
(as we saw with the simple rectangles in Example 2-2 ).
Examples of More Advanced Line Drawing
Example 2-3 shows these attributes in action; the results are depicted in Figure 2-3 .
There are a few oddities when drawing lines on the canvas, which we will point out
along the way.