Canvas - HTML5 - page 198

Figure 9-7. Linear gradient filling a shape
Discussion
There are several different ways to control the style of how your paths are rendered.
For instance, for lines (strokes), you can set the lineWidth property to vary the width
of the lines used to stroke. In addition, the lineCap property controls how the cap/end
of a line segment is rendered (squared off, rounded, etc.), and the lineJoin property
controls how the connection (or joint) between two line segments is drawn. Fig-
ure 9-8 shows a few different line styles.
In addition to line styles, you can define custom color styles for both lines and fills.
There are two options: gradients and patterns.
Gradients are a gradual progression from one color to another color (or colors). They
can be linear (progressing in a straight line) or radial (progressing radially/circularly
from a central point). To use them, you create a gradient object, set one or more color
stops on it, and then use that object as the strokeStyle or fillStyle .
Patterns are essentially created by taking an existing image (even another canvas ele-
ment) and using that as the “color” for a line or fill, repeating the image in question as
necessary to fill the space required of the color. To use them, you create a pattern object,
specifying which image to use and how to repeat it, and then use that object as the
strokeStyle or fillStyle . Figure 9-9 shows the results of a few different fill gradients
and patterns.