HTML and CSS Reference
shortcuts for particular effects. This section covers them.
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
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(