Peter Lubbers - Pro HTML 5 Programming

Figure 2-12. Tree with an image used for trunk
Using Gradients
CHAPTER 2 ■ USING THE HTML5 CANVAS API
Not satisfied with the tree trunk? Well, neither are we. Let’s take another approach to drawing our tree
trunk that uses a little more finesse: gradients. Gradients allow you to apply a gradual algorithmic
sampling of colors as either a stroke or fill style, just like the patterns were applied in the last section.
Creating gradients requires a three-step process:
1. Create the gradient object itself.
2. Apply color stops to the gradient object, signaling changes in color along the
transition.
3. Set the gradient as either a fillStyle or a strokeStyle on the context.
It is perhaps easiest to think of gradients as a smooth change of color that moves along a line. For
example, if you supply points A and B as the arguments to the creation of a gradient, the color will be
transitioned for any stroke or fill that moves in the direction of point A to point B.
To determine what colors are displayed, simply use the addColorStop function on the gradient
object itself. This function allows you to specify an offset and a color. The color argument is the color you
want to be applied in the stroke or fill at the offset position. The offset position is a value between 0.0 and
1.0, representing how far along the gradient line the color should be reached.
If you create a gradient from point (0,0) to point (0,100) and specify a white color stop at offset 0.0
and a black offset at offset 1.0, then when the stroke or fill occurs, you will see the color gradually shift
from white (the beginning color stop) to black (the end color stop) as the rendering moves from point
(0,0) to point (0,100).
45