Drawing on the Canvas - HTML5 Canvas - page 61

Figure 2-32. A radial gradient applied to a circle
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.