466 CHAPTER 12 Drawing with HTML5
FIGURE 12-2 he rendered rectangles, using T CSS color values■■Gradient A CanvasGradient object that is created by the context’s
createLinearGradient or createRadialGradient method to create a gradient fill.
The createLinearGradient method accepts the x and y values of two points that are
used to create a linear gradient, for example, createLinearGradient(x0, y0, x1, y1).
The createRadialGradient accepts the x and y center and the radius of two circles, for
example, createRadialGradient(x0, y0, r0, x1, y1, r1).
After the gradient object is created, call its addColorStop method to specify that a
color is set at a location on the gradient. The addColorStop function takes two param-
eters; the first parameter is the location, which is a value between 0 and 1 where 0 is
the beginning of the gradient and 1 is the end of the gradient, and the second param-
eter is the color value.
The following is an example of setting fillStyle, using a gradient value.
function drawGradient() {
var canvas = document.getElementById('myCanvas')
, ctx = canvas.getContext('2d')
, x0 = 0
, y0 = 0
, r0 = 0
, x1 = 200
, y1 = 0
, r1 = 100
, width = 300