HTML5: Your visual blueprint™ for designing rich web pages and applications

USING LINEAR GRADIENT COLORS ON THE CANVAS

You may use linear gradient colors in place of a solid stroke or fill color. This allows you to add interesting multicolored effects on a single canvas object that blend from one color into another.

To create a gradient, you must first call createLinearGradient() and specify the coordinates for where the first color begins (x0, y0) and the last color ends (x1, y1):

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

The gradient object created must then be assigned color-stop offsets. An offset determines where along the (x0, y0) to (x1, y1) path that a specific color will be strongest:

gradient.addColorStop(offset, 'color1');gradient.addColorStop(offset, 'color2');

For each gradient.addColorStop() ...