HTML5 Canvas [25]
We set color stops the same way we did with the linear gradients:
gr.addColorStop(0,'rgb(255,0,0)');
gr.addColorStop(.5,'rgb(0,255,0)');
gr.addColorStop(1,'rgb(255,0,0)');
Example 2-21 puts this together to create the result shown in Figure 2-30.
Example 2-21. A simple radial gradient
function drawScreen() {
var gr = context.createRadialGradient(50,50,25,50,50,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.fillRect(0, 0, 200, 200);
}
Figure 2-30. A simple radial gradient
Example 2-22 offsets the second circle from the first to create the effects shown in Figure 2-31.
Example 2-22. A complex radial gradient
function drawScreen() {
var gr = context.createRadialGradient(50,50,25,100,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.fillRect(0, 0, 200, 200);
}
Figure 2-31. A complex radial gradient
As with the linear gradients, we can also apply the radial gradients to complex shapes. Example 2-23 takes an arc example from earlier in this chapter, but applies a radial gradient to create Figure 2-32.
Example 2-23. A radial gradient applied to a circle
function drawScreen() {
var gr = context.createRadialGradient(50,50,25,100,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.arc(100, 100, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);
context.fill();
}
Figure 2-32. A radial gradient applied to a circle
Example 2-23 takes the radial gradient from Example 2-22 and applies it to a circle shape rather than a rectangle shape. This removes the red square from the background of the shape.
We can also apply our radial gradient to the stroke of our arc rather than the fill, as shown in Example 2-24 and Figure 2-33.
Example 2-24. An arc stroke gradient
function drawScreen() {
var gr = context.createRadialGradient(50,50,25,100,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.strokeStyle = gr;
context.arc(100, 100, 50, (Math.PI/180)*0, (Math.PI/180)*360, false)
context.stroke();
}
Figure 2-33. An arc stroke gradient
Example 2-24 created a circle that is smaller than the version in Example 2-23, so the radial gradient would show up on the stroke of the arc. If we left it the same size as Example 2-23, we would have a solid red fill because the radial gradient is solid red at the diameter edge of the circle.
Filling Shapes with Patterns
We will cover using bitmap images on the canvas in Chapter 4, but for now, let’s take a quick look at how images can be used as fill patterns for shapes we draw.
Fill patterns are initialized with the createPattern() function, which takes two parameters. The first is an Image object instance, and the second is a String representing how to display the repeat pattern inside the shape. We can use a loaded image file or an entire other canvas as a fill pattern for a drawn shape.
There are currently four types of image fills:
repeat
repeat-x
repeat-y
no-repeat
Modern browsers have implemented these four types to various degrees, but standard repeat seems to be the most common. Let’s look at it now and then we will take a brief look at the other three.
Figure 2-34 shows a simple bitmap fill pattern that we can use to test this functionality. It is a 20×20 green circle on a transparent background, saved as a .gif file named fill_20x20.gif.
Figure 2-34. The fill_20x20.gif image for our fill
Example 2-25 tests