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