Dynamic graphics - HTML5 and CSS3 - page 91

Finally, the gradient is applied as a fillStyle as before:

ctx.fillStyle = radialgradient;
ctx.fillRect(20,20,200,200);

Check out the full listing in the file ch03/canvas-10.html in the code
download.

Note that you define both linear and radial gradients with
coordinates relative to the entire canvas context, not the shape
you want to apply them to. If you want the gradient to exactly
fill the shape, you have to make sure you choose the coordinates so
that the gradient appears in the shape you want to fill it with.

The gradient isn't confined to the coordinates you specify—it
extends across the canvas. The following examples show a linear
gradient created with three different sets of coordinates.

createLinearGradient(
0,0,320,0
);

createLinearGradient(
0,0,100,100
);

createLinearGradient(
100,100,150,150
);

Drawing drop shadows
Drop shadows are an effect much loved by designers, and the
<canvas> element has built-in support. To create a shadow, define the
shadowOffsetX , shadowOffsetY , shadowBlur , and shadowColor properties on