JUMP START HTML5 (2014)

Chapter 15 Canvas & SVG: Canvas Gradients

With HTML5 canvas, you're not limited to block colors, but can use gradients to fill shapes such as rectangles and circles. There are two different types of gradient you can use:

// create a linear gradient

createLinearGradient(x,y,x1,y1)

Figure 15.1. An example of a linear gradient

// create a radial gradient

createRadialGradient(x,y,r,x1,y1,r1)

Figure 15.2. An example of a radial gradient

Let's start by creating a linear gradient (the canvas context, ctx, has already been defined):

// create linear gradient

var grd = ctx.createLinearGradient(0,0,400,0);

grd.addColorStop(0,"blue");

grd.addColorStop(1,"yellow");

// fill with gradient

ctx.fillStyle = grd;

ctx.fillRect(40,20,300,160);

The result is shown in Figure 15.3.

Figure 15.3. Our linear blue-yellow gradient

The first line var grd = ctx.createLinearGradient(0,0,400,0); creates a CanvasGradient object which defines a gradient between two sets of coordinates (x1,y1,x2,y2). These determine the size and direction of the gradient. In our example, we use (0,0) to (400,0) which results in a horizontal gradient which is 400 pixels in width. If our box was wider, the last color would extend accordingly.

If we required a 300px vertical gradient, we would use:

var grd = ctx.createLinearGradient(0,0,0,300);

A 45-degree diagonal gradient in a 100x100px space would be defined as:

var grd = ctx.createLinearGradient(0,0,100,100);

We can now set the color values at certain color stop points within that gradient using the addColorStop method. It is passed two values:

· a stop value between 0 (the left-most end of the linear gradient) and 1 (the right-most end of the gradient)

· a color

We have used "blue" at stop value 0—or coordinate (0,0)—and "yellow" at stop value 1—or coordinate (400,0). The browser uses the values to define a smooth color gradient from blue to yellow.

You can add any number of gradient stops. For example, a "red" color stop at stop value 0.5 would create a smooth gradient from blue, to red at the mid-point (200px), to yellow at the end.

Radial Gradients

Now let's look at a radial gradient:

// create radial gradient

var grd = ctx.createRadialGradient(150,100,10,180,120,200);

grd.addColorStop(0,"blue");

grd.addColorStop(1,"yellow");

// fill with gradient

ctx.fillStyle = grd;

ctx.fillRect(0,0,300,150);

The createRadialGradient parameters are:

· the x and y coordinates of the starting circle

· the radius of the starting circle

· the x and y coordinates of the ending circle

· the radius of the ending circle

Our code produces the output seen in Figure 15.4. You can experiment with different values to create interesting effects.

Figure 15.4. A radial gradient

Playing with the Color Stops

Let's modify the linear gradient code we created above and go a little crazy with adding some color stops:

var grd = ctx.createLinearGradient(35,25,25,190,105,50);

grd.addColorStop(0,"red");

grd.addColorStop(0.25,"blue");

grd.addColorStop(0.3,"yellow");

grd.addColorStop(0.35,"magenta");

grd.addColorStop(0.4,"green");

grd.addColorStop(0.45,"pink");

grd.addColorStop(0.5,"gray");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(20,20,400,400);

The results are shown in Figure 15.5.

Figure 15.5. A crazy linear gradient

To create a radial gradient using the same colors you could modify one line as follows:

var grd=ctx.createRadialGradient(35,25,25,190,105,50);

which would display a pretty groovy effect, as shown in Figure 15.6:

Figure 15.6. A crazy radial fill