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

USING RADIAL GRADIENT COLORS ON THE CANVAS

An alternative to the linear gradient is the radial gradient. This allows you to add interesting multicolored effects on a single canvas object that actually blend seamlessly from one color into another, but in a circular fashion — outgoing from a specific point and incoming into another specific point.

To create a gradient, you must first call createRadial Gradient() and specify the absolute coordinates for where the first color begins (x0, y0), the radius outward as r0, and where the last color ends (x1, y1), plus its radius, r1:

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

The gradient object created must then be assigned color-stop offsets. An offset determines where along ...