HTML5 Canvas [23]
Example 2-14. A linear horizontal gradient
function drawScreen() {
// horizontal gradient values must remain 0
var gr = context.createLinearGradient(0, 0, 100, 0);
// Add the color stops.
gr.addColorStop(0,'rgb(255,0,0)');
gr.addColorStop(.5,'rgb(0,255,0)');
gr.addColorStop(1,'rgb(255,0,0)');
// Use the gradient for the fillStyle.
context.fillStyle = gr;
context.fillRect(0, 0,100,100);
}
Figure 2-23. A linear horizontal gradient
To create the horizontal gradient, we must first create a variable (gr) to reference the new gradient. Here’s how we set it:
var gr = context.createLinearGradient(0,0,100,0);
The four parameter values in the createLinearGradient method call are the top-left x and y coordinates to start the gradient, as well as the two bottom-right points to end the gradient. Our example starts at 0,0 and goes to 100,0. Notice that the y values are both 0 when we create a horizontal gradient; the opposite will be true when we create a vertical gradient.
Once we have defined the size of our gradient, we then add in color stops that take two parameter values. The first is a relative position origin point along the gradient to start with color, and the second is the color to use. The relative position must be a value from 0.0 to 1.0:
gr.addColorStop(0,'rgb(255,0,0)');
gr.addColorStop(.5,'rgb(0,255,0)');
gr.addColorStop(1,'rgb(255,0,0)');
Therefore, in Example 2-14, we have set a red color at 0, a green color at .5 (the center), and another red color at 1. This will fill our shape with a relatively even red to green to red gradient.
Next, we need to get the context.fillStyle to be the gradient we just created:
context.fillStyle = gr;
Finally, we create a rectangle on the canvas:
context.fillRect(0, 0, 100, 100);
Notice that we created a rectangle that was the exact size of our gradient. We can change the size of the output rectangle like this:
context.fillRect(0, 100, 50, 100);
context.fillRect(0, 200, 200, 100);
Example 2-15 adds these two new filled rectangles to Example 2-14 to create Figure 2-24. Notice that the gradient fills up the available space, with the final color filling out the area larger than the defined gradient size.
Example 2-15. Multiple gradient-filled objects
function drawScreen() {
var gr = context.createLinearGradient(0, 0, 100, 0);
// Add the color stops.
gr.addColorStop(0,'rgb(255,0,0)');
gr.addColorStop(.5,'rgb(0,255,0)');
gr.addColorStop(1,'rgb(255,0,0)');
// Use the gradient for the fillStyle.
context.fillStyle = gr;
context.fillRect(0, 0, 100, 100);
context.fillRect(0, 100, 50, 100);
context.fillRect(0, 200, 200, 100);
}
Figure 2-24. Linear horizontal gradient on multiple objects
Applying a horizontal gradient to a stroke
Gradients can be applied to any shape—even the stroke around a shape. Example 2-16 takes the filled rectangles from Example 2-15 and creates a strokeRect shape instead of a filled rectangle. Figure 2-25 shows the very different result.
Example 2-16. A horizontal stroke gradient
function drawScreen() {
var gr = context.createLinearGradient(0, 0, 100, 0);
// Add the color stops.
gr.addColorStop(0,'rgb(255,0,0)');
gr.addColorStop(.5,'rgb(0,255,0)');
gr.addColorStop(1,'rgb(255,0,0)');
// Use the gradient for the fillStyle.
context.strokeStyle = gr;
context.strokeRect(0, 0, 100, 100);
context.strokeRect(0, 100, 50, 100);
context.strokeRect(0, 200, 200, 100);
}
Figure 2-25. Horizontal stroke gradients
Applying a horizontal gradient to a complex shape
We can also apply a linear gradient to a “closed” shape made up of points, as shown in Example 2-17. A shape is considered closed when the final point is the same as the starting point.
Example 2-17. Horizontal gradient on a complex shape
function drawScreen() {
var gr = context.createLinearGradient(0, 0, 100, 0);
// Add the color stops.
gr.addColorStop(0,'rgb(255,0,0)');
gr.addColorStop(.5,'rgb(0,255,0)');
gr.addColorStop(1,'rgb(255,0,0)');
// Use the gradient for the fillStyle.