gradient.addColorStop (offset, colour);

• Adds a colour stop to the gradient at the given offset.
• colour is specified as a CSS colour string.
• offset must be in the range 0.0 to 1.0.
• Throws exception SYNTAX_ERR if colour is invalid.
• Throws exception INDEX_SIZE_ERR if offset is out of range.

gradient = context.createLinearGradient (x0, y0, x1, y1);

• Returns a gradient object object representing a linear gradient painted along the line (x0, y0) to (x1, y1).
• x0, y0, x1, y1 are measured in screen coordinates which must intersect the object being drawn in order for the gradient to be visible.
• Throws NOT_SUPPORTED_ERR if any argument is not a number.

gradient = context.createRadialGradient (x0, y0, r0, x1, y1, r1);

• Returns a  gradient object representing a radial gradient painted along the cone given by the arguments.
• x0, y0, x1, y1 are measured in screen coordinates which must intersect the object being drawn in order for the gradient to be visible.
• r0 and r1 are the radii of two circles defining the cone.
• Throws NOT_SUPPORTED_ERR if any argument is not a number.
• Throws INDEX_SIZE_ERR if radii r0 & r1 are negative

var cnv = document.getElementById('canvas');
var ctx = cnv.getContext('2d');
ctx.width = ctx.width; // Clear the context

// Define a linear gradient
var linear = ctx.createLinearGradient(20, 20, 100, 100);
linear.addColorStop(0.0, "#FF0000");
linear.addColorStop(0.5, "#0000FF");
linear.addColorStop(1.0, "#FFFF00");

// Draw a square, filled with the linear gradient.
ctx.beginPath();
ctx.fillStyle = linear;
ctx.rect(20, 20, 100, 100);
ctx.fill();

// Define a radial gradient. Note that the gradient
// is positioned under the square that is going to
// be drawn.
var radial = ctx.createRadialGradient(180 + 50, 20 + 50, 5, 180 + 50, 20 + 50, 100);
radial.addColorStop(0.0, "#FF00FF");
radial.addColorStop(1.0, "#0000FF");

// Draw a square, filled with the radial gradient.
ctx.beginPath();
ctx.fillStyle = radial;
ctx.rect(180, 20, 100, 100);
ctx.fill();