Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 51

This code creates the CanvasGradient object by passing in the start and end points of a
gradient line. You then add three color stops. The addColorStop method takes two parameters.
The first is a value from 0 to 1, where 0 is the starting point of the gradient line and 1 is the
ending point. The second parameter is the color to start filling with at that stop. This example
has three stops, so the gradient transitions through three colors. The gradient output is dis-
played in Figure 1-36.
FIGURE 1-36 The <canvas> element colored with a linear gradient
You can also create a radial gradient using the createRadialGradient method. This method
takes six parameters, which specify the center point and radius of two circles and the color
transitions through the stops along the cone formed by the two circles. The following code
produces a radial gradient in which the cone is pointed toward the viewer:
var ctxt = drawingSurface.getContext("2d");
ctxt.lineWidth = 3;
ctxt.rect(150, 150, 250, 175);
var gradient = ctxt.createRadialGradient(200, 200,5, 250, 250,100);
gradient.addColorStop(0, "Red");
gradient.addColorStop(.5, "Orange");
gradient.addColorStop(1, "Blue");
ctxt.fillStyle = gradient;
ctxt.fill();
ctxt.stroke();
Figure 1-37 shows the output of this gradient:
FIGURE 1-37 A radial gradient colored on a canvas