JavaScript: The Definitive Guide, 6th Edition

Name

CanvasGradient — a color gradient for use in a canvas

Synopsis

A CanvasGradient object represents a color gradient that can be assigned to both the stroke Style and fillStyle properties of a CanvasRenderingContext2D object. The createLinearGradient() and createRadialGradient() methods of CanvasRenderingContext2D both return CanvasGradient objects.

Once you have created a CanvasGradient object, use addColorStop() to specify what colors should appear at what positions within the gradient. Between the positions you specify, colors are interpolated to create a smooth gradient or fade. If you specify no color stops, the gradient will be uniform transparent black.

Methods

void addColorStop(double offset, string color)

addColorStop() specifies fixed colors within a gradient. color is a CSS color string. offset is a floating-point value in the range 0.0 to 1.0 that represents a fraction between the start and end points of the gradient. An offset of 0 corresponds to the start point, and an offset of 1 corresponds to the end point.

If you specify two or more color stops, the gradient will smoothly interpolate colors between the stops. Before the first stop, the gradient will display the color of the first stop. After the last stop, the gradient will display the color of the last stop. If you specify only a single stop, the gradient will be one solid color. If you specify no color stops, the gradient will be uniform transparent black.