Drawing on the Canvas - HTML5 Canvas - page 56

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 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 .

Vertical gradients.

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

}