Drawing on the Canvas - HTML5 Canvas - page 105

// 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 function drawScreen () {

var 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 );