addColorStop method

Article
05/02/2017

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

Syntax

object.addColorStop(offset, color);

Parameters

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

HTML Canvas 2D Context, Section 5

Remarks

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