Dynamic graphics - HTML5 and CSS3 - page 88

yourself in JavaScript. But the <canvas> element has some built-in
shortcuts for particular effects. This section covers them.
Creating gradients
The strokeStyle and fillStyle methods you used in “Drawing shapes”
to set the color of lines and shapes can also accept a gradient object
where the color changes smoothly across a defined space. The <canvas>
element can create two types of gradient:
❂ Linear —The gradient follows a straight line.
❂ Radial —The gradient is circular.
In this section, you'll create one example of each. There are three steps
to creating either gradient type in the <canvas> element:
1 Create a gradient.
2 Specify the color stops.
3 Apply the gradient as a fill to a shape.
Here's a simple linear gradient in
place of the solid fill from the earlier
examples.
You define the extents of the gradient
with the createLinearGradient() met-
hod. This method takes four parameters that define the upper-left and
lower-right corners. The following diagram contains the code and
indicates what the parameters refer to in the screenshot.
var lineargradient = ctx.createLinearGradient(
20,20,
220,220
);