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

No credit card required

 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.

```my_gradient.addColorStop(0, "black");

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);
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); 