Drawing on the Canvas - HTML5 Canvas - page 58

Figure 2-28. A vertical gradient stroke
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 gra-
dient, 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);