468 CHAPTER 12 Drawing with HTML5
FIGURE 12-3 Creating and assigning gradients to the fillStyle propertyThis example code displays two rectangles for each test, in which the second rectangle
is offset from the first rectangle, so you can see how the gradient is rendered relative
to the canvas, not to the rectangle.
The first pair of rectangles demonstrates a horizontal linear gradient when y0 and y1
are equal.
The second pair of rectangles shows what happens when y1 is different from y0. In this
example, if you draw a line from x0, y0 to x1, y1, the line will be angled downward. The
gradient is rendered along this line and displays as a diagonal linear gradient.
The third pair of rectangles illustrates the radial gradient when x0=x1 and y0=y1, but
r0 is set to zero when r1 is set to 100. Because both points are the same, the radial gra-
dient is circular. Because r0 is zero, the gradient starts in the center. The gradient ends
at r1, which is set to 100.
The last pair of rectangles shows what happens when the two points are not the same.
In this case, x0 and x1 are the same, but y0 and y1 are different, which produces a non-
circular gradient.
■■Pattern A CanvasPattern object that is created by using the context’s createPattern
method and creates a pattern fill. The createPattern method takes an image parameter
and a direction parameter. The image is a reference to an <img> element, and the
direction is a string containing no-repeat, repeat-x, repeat-y, or repeat.