HTML5 Canvas [24]
context.fillStyle = gr;
context.beginPath();
context.moveTo(0,0);
context.lineTo(50,0);
context.lineTo(100,50);
context.lineTo(50,100);
context.lineTo(0,100);
context.lineTo(0,0);
context.stroke();
context.fill();
context.closePath();
}
In this example, we use the context.fill() command to fill in our shape with the current fillStyle, creating the output shown in Figure 2-26.
Figure 2-26. A horizontal gradient on a complex shape
Figure 2-26 shows the new shape we have created with points. As long as the points are closed, the fill will work as we expect.
Vertical gradients
Vertical gradients are created in a very similar manner as the horizontal variety. The difference is that we must specify a y value that is not 0, and the x values must both be 0. Example 2-18 shows the shape from Example 2-17 created with a vertical rather than a horizontal gradient to produce the output in Figure 2-27.
Example 2-18. Vertical gradients
function drawScreen() {
var gr = context.createLinearGradient(0, 0, 0, 100);
// 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.beginPath();
context.moveTo(0,0);
context.lineTo(50,0);
context.lineTo(100,50);
context.lineTo(50,100);
context.lineTo(0,100);
context.lineTo(0,0);
//context.stroke();
context.fill();
context.closePath();
}
Figure 2-27. A vertical gradient example
The only difference between Example 2-18 and Example 2-17 is the line creating the linear gradient.
The horizontal version (Example 2-17):
var gr = context.createLinearGradient(0, 0, 100, 0);
The new vertical version (Example 2-18):
var gr = context.createLinearGradient(0, 0, 0, 100);
All of the same rules for strokes on horizontal gradients apply to vertical ones. Example 2-19 takes the shape from Example 2-18, stroking it with the gradient instead of filling it, producing the outline shown in Figure 2-28.
Example 2-19. A vertical gradient stroke
function drawScreen() {
var gr = context.createLinearGradient(0, 0, 0, 100);
// 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.beginPath();
context.moveTo(0,0);
context.lineTo(50,0);
context.lineTo(100,50);
context.lineTo(50,100);
context.lineTo(0,100);
context.lineTo(0,0);
context.stroke();
context.closePath();
}
Figure 2-28. A vertical gradient stroke
Diagonal gradients
You can easily create a diagonal gradient by varying both the second x and second y parameters of the createLinearGradient() function:
var gr= context.createLinearGradient(0, 0, 100, 100);
To create a perfect diagonal gradient, as shown in Figure 2-29, fill a square that is the same size as the diagonal gradient. The code is provided in Example 2-20.
Example 2-20. A diagonal gradient
function drawScreen() {
var gr = context.createLinearGradient(0, 0, 100, 100);
// 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.beginPath();
context.moveTo(0,0);
context.fillRect(0,0,100,100)
context.closePath();
}
Figure 2-29. A diagonal gradient example
Radial gradients
The definition process for radial and linear gradients is very similar. Although a radial gradient takes six parameters to initialize rather than the four needed for a linear gradient, it uses the same color stop idea to create the color changes.
The six parameters are used to define the center point and the radii of two circles. The first circle is the “start” circle, and the second circle is the “end” circle. Let’s look at an example:
var gr = context.createRadialGradient(50,50,25,50,50,100);
The first circle has a center point of 50,50 and a radius of 25; the second has a center point of 50,50