CanvasGradient: addColorStop() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Note: This feature is available in Web Workers.

The CanvasGradient.addColorStop() method adds a new color stop, defined by an offset and a color, to a given canvas gradient.

Syntax

js
addColorStop(offset, color)

Parameters

offset

A number between 0 and 1, inclusive, representing the position of the color stop. 0 represents the start of the gradient and 1 represents the end.

color

A CSS <color> value representing the color of the stop.

Return value

None (undefined).

Exceptions

IndexSizeError DOMException

Thrown if offset is not between 0 and 1 (both included).

SyntaxError DOMException

Thrown if color cannot be parsed as a CSS <color> value.

Examples

Adding stops to a gradient

This example uses the addColorStop method to add stops to a linear CanvasGradient object. The gradient is then used to fill a rectangle.

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(0.7, "white");
gradient.addColorStop(1, "pink");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

Result

Specifications

Specification
HTML
# dom-canvasgradient-addcolorstop-dev

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
addColorStop

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also