addColorStop method

Adds the specified colors and the position in a CanvasGradient object.

HTML Canvas 2D Context, Section 5Internet Explorer 9



object.addColorStop(offset, color);


offset [in]

Type: number

A floating point value between 0.0 and 1.0 that represents the position between the start and end points in a gradient.

color [in]

Type: string

A CSS color string to display at the position that the offset parameter specifies.

Return value

This method does not return a value.

Standards information


You can call the ICanvasGradient::addColorStop method multiple times to change a gradient. If you never call this method for CanvasGradient, the gradient is not visible. You need to create at least one color stop to have a visible gradient.

When you use ICanvasRenderingContext2D::createLinearGradient, you set a width for your gradient. If your shape is wider than the gradient width, then the extra part will be filled with the last color in gradient. .

See also