Dynamic graphics - HTML5 and CSS3 - page 89

Next you need to add color stops to the lineargradient you just created.
A color stop is a point on the gradient at which you're setting a specific
color. The browser interpolates between the color stops to create the
gradient. The gradient object has an addColorStop() method for this. It
accepts two parameters: a position and a color. The position is a
number between 0 and 1, where 0 is the start of the gradient and 1 is
the end. The code in the next diagram adds three color stops to your
gradient.
lineargradient
.addColorStop(
0,
'rgb(127,127,127)'
);
lineargradient
.addColorStop(
0.5,
'rgb(255,255,255)'
);
lineargradient
.addColorStop(
1,
'rgb(127,127,127)'
);
All that remains is to add the gradient to the context as a fillStyle and
draw a shape. Here's the complete draw() function from ch03/canvas-
9.html:
function draw(){
var canvas = document.getElementById('mycanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var lineargradient = ctx.createLinearGradient(20,20,220,220);
lineargradient.addColorStop(0,'rgb(127,127,127)');
lineargradient.addColorStop(0.5,'rgb(255,255,255)');
lineargradient.addColorStop(1,'rgb(127,127,127)');
ctx.fillStyle = lineargradient;
ctx.fillRect(20,20,200,200);
ctx.strokeStyle = 'rgb(0,127,127)';