Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Collapse the table of content
Expand the table of content

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




Community Additions

© 2015 Microsoft