O'Reilly logo

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

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required