JavaScript: The Definitive Guide, 5th Edition

Name

CanvasRenderingContext2D.createRadialGradient( ): create a radial color gradient

Synopsis

CanvasGradient createRadialGradient(floatxStart, float yStart, float
radiusStart,
                                    float xEnd, float yEnd, float radiusEnd)

Arguments

xStart, yStart

The coordinates of the center of the starting circle.

radiusStart

The radius of the starting circle.

xEnd, yEnd

The coordinates of the center of the ending circle.

radiusEnd

The radius of the ending circle.

Returns

A CanvasGradient object representing a radial color gradient.

Description

This method creates and returns a new CanvasGradient object that radially interpolates colors between the circumferences of the two specified circles. Note that this method does not specify any colors for the gradient. Use the addColorStop( ) method of the returned object to do that. To stroke lines or fill areas using a gradient, assign a CanvasGradient object to the strokeStyle or fillStyle properties.

Radial gradients are rendered by using the color at offset 0 for the circumference of the first circle, the color at offset 1 for the second circle, and interpolated color values (red, green, blue, and alpha) at circles between the two.

See Also

CanvasGradient.addColorStop( ), CanvasRenderingContext2D.createLinearGradient( )