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 ...

Get HTML5: Your visual blueprint™ for designing rich web pages and applications now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.