CanvasGradient

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

It can be used as a fillStyle or strokeStyle.

Properties

As an opaque object, there is no exposed property.

Methods

There is no inherited method.

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 Status Comment
HTML Living Standard
The definition of 'CanvasGradient' in that specification.		 Living Standard

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
CanvasGradientChrome Full support 4Edge Full support 12Firefox Full support 3.6
Notes
Full support 3.6
Notes
Notes 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.
IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
addColorStopChrome Full support YesEdge Full support 12Firefox Full support 3.6IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support
Full support
See implementation notes.
See implementation notes.

See also