O'Reilly logo

HTML5: Up and Running by Mark Pilgrim

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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");
A left-to-right linear gradient

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.

A left-to-right linear gradient

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.

A top-to-bottom linear gradient

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.

A diagonal linear gradient

Figure 4-11. A diagonal linear gradient

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required