HTML5 Guidelines for Web Developers

116 Chapter 5—Canvas

linGrad.addColorStop(0.7, 'orange');

linGrad.addColorStop(1.0, 'purple');

Colors are specified following the rules for CSS color values and are identified as

SVG named colors in our examples to make it more readable. Our linear gradient

is now finished and can be assigned via fillStyle or strokeStyle:

context.fillStyle = linGrad;

context.fillRect(0,450,1000,450);

Unlike linear gradients, the start and end points of radial gradients are not points,

but circles. So to define a radial gradient, we now need to use the method con-

text.createRadialGradient(x0, y0, r0, x1, y1, r1) (see Figure 5.5).

Figure 5.5 Components of a radial gradient

On the left side of the graphic, you can see the start and end circle, in the middle

the three color stops with offset values, and on the right the final result: a sphere

that appears to glow. A very appealing result is generated by a bit of clear and

simple source code: