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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 4Edge Full support YesFirefox 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 ? Chrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 10.0Safari iOS Full support 3.2Samsung Internet Android Full support Yes
addColorStopChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also

Document Tags and Contributors

Last updated by: mfuji09,