CanvasGradient

The CanvasGradient interface represents an opaque object describing a gradient. It is returned by the methods CanvasRenderingContext2D.createLinearGradient(), CanvasRenderingContext2D.createConicGradient() or CanvasRenderingContext2D.createRadialGradient().

It can be used as a fillStyle or strokeStyle.

Properties

As an opaque object, there is no exposed property.

Methods

CanvasGradient.addColorStop()

Adds a new stop, defined by an offset and a color, to the gradient. If the offset is not between 0 and 1, inclusive, an INDEX_SIZE_ERR is raised; if the color can't be parsed as a CSS <color>, a SYNTAX_ERR is raised.

Specifications

Specification
HTML Standard (HTML)
# canvasgradient

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
CanvasGradient
6
12
3.6
Before Firefox 5.0, specifying non-finite values when adding color stops through a call to addColorStop() incorrectly throws SYNTAX_ERR instead of INDEX_SIZE_ERR.
9
9
5.1
≤37
18
4
10.1
6
1.0
addColorStop
6
12
3.6
9
9
5.1
≤37
18
4
10.1
6
1.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient