/Web APIs


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.

Instance properties

As an opaque object, there is no exposed property.

Instance methods


Adds a new stop, defined by an offset and a color, to the gradient.


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 1 12
1.5Before 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 2 4.4 18 4 10.1 1 1.0
addColorStop 1 12 1.5 9 9 2 4.4 18 4 10.1 1 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.