HTML5: Up and Running

Gradients

	IE[a]	Firefox	Safari	Chrome	Opera	iPhone	Android
Linear gradients	7.0+	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+
Radial gradients	·	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+
[a] Internet Explorer support requires the third-party explorercanvas library.

Earlier in this chapter, you learned how to draw a rectangle filled with a solid color (see Simple Shapes), then a line stroked with a solid color (see Paths). But shapes and lines aren’t limited to solid colors. You can do all kinds of magic with gradients. Figure 4-8 shows an example.

The markup looks the same as any other canvas:

<canvas id="d" width="300" height="225"></canvas>

First, we need to find the <canvas> element and its drawing context:

var d_canvas = document.getElementById("d");
var context = d_canvas.getContext("2d");

Figure 4-8. A left-to-right linear gradient

Once we have the drawing context, we can start to define a gradient. A gradient is a smooth transition between two or more colors. The canvas drawing context supports two types of gradients:

• createLinearGradient(x0, y0, x1, y1) paints along a line from (x0, y0) to (x1, y1).

• createRadialGradient(x0, y0, r0, x1, y1, r1) paints along a cone between two circles. The first three parameters represent the starting circle, with origin (x0, y0) and radius r0. The last three parameters represent the ending circle, with origin (x1, y1) and radius r1.

Let’s make a linear gradient. Gradients can be any size, but we’ll ...