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 make this gradient 300 pixels wide, like the canvas:

var my_gradient = context.createLinearGradient(0, 0, 300, 0);

Because the y values (the second and fourth parameters) are both 0, this gradient will shade evenly from left to right.

Once we have a gradient object, we can define the gradient’s colors. A gradient has two or more color stops. Color stops can be anywhere along the gradient. To add a color stop, you need to specify its position along the gradient. Gradient positions can be anywhere between 0 and 1.

Let’s define a gradient that shades from black to white:

my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");

Defining a gradient doesn’t draw anything on the canvas. It’s just an object tucked away in memory somewhere. To draw a gradient, you set your fillStyle to the gradient and draw a shape, like a rectangle or a line:

context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

Figure 4-9 shows the result.

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

Suppose you want a gradient that shades from top to bottom. When you create the gradient object, keep the x values (the first and third parameters) constant, and make the y values (the second and fourth parameters) range from 0 to the height of the canvas:

var my_gradient = context.createLinearGradient(0, 0, 0, 225);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

Figure 4-10 shows the result.

Figure 4-10. A top-to-bottom linear gradient

You can also create gradients along a diagonal. For example:

var my_gradient = context.createLinearGradient(0, 0, 300, 225);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

Figure 4-11 shows the result.

Figure 4-11. A diagonal linear gradient