Dynamic graphics - HTML5 and CSS3 - page 90

ctx.moveTo(20,20);
ctx.lineTo(220,220);
ctx.lineWidth = 5;
ctx.stroke();
}
}
Now let's create a radial gradient.
For a radial gradient, you use the
createRadialGradient() method. Six
values are required: a center point
and a radius for the inner bound,
and a center point and a radius for
the outer bound. This creates two
circles between which the gradient
is drawn. The two circles and their corresponding parameters are
shown here.
var radialgradient = ctx.createRadialGradient(
120,120,50,
120,120,100
);
Adding color stops is exactly the same as with the linear gradient,
except that now those stops define circles between the two described in
the createRadialGradient method:
radialgradient.addColorStop(0, 'rgb(127,127,127)');
radialgradient.addColorStop(0.5, 'rgba(127,127,127,0.25)');
radialgradient.addColorStop(1, 'rgb(127,127,127)');