{{APIRef}}
The CanvasGradient
interface represents an opaque object describing a gradient and returned by {{domxref("CanvasRenderingContext2D")}}#
createLinearGradient
or {{domxref("CanvasRenderingContext2D")}}#
createRadialGradient
methods.
Properties
Representing an opaque object, there is no exposed property.
Methods
There is no inherited method.
-
CanvasGradient.addColorStop
-
Add a new stop, defined by an
offset
and acolor
, to the gradient. If the offset is not between0
and1
anINDEX_SIZE_ERR
is raised, if the color can't be parsed as a CSS {{xref_csscolorvalue}}, aSYNTAX_ERR
is raised.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}} | {{Spec2('HTML WHATWG')}} | No change from {{Spec2('HTML Canvas 2D Context W3C')}} |
{{SpecName('HTML Canvas 2D Context W3C', '#canvasgradient', 'CanvasGradient')}} | {{Spec2('HTML Canvas 2D Context W3C')}} | Initial definition. |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 4.0 | {{CompatGeckoDesktop("3.6")}} [1] | 9.0 | 9.0 | 3.1 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | {{CompatGeckoMobile("3.6")}} [1] | {{CompatUnknown}} | 10.0 | 3.2 |
[1] Before Gecko 5.0, {{geckoRelease("5.0")}}, specifying non-finite values when adding color stops through a call to addColorStop()
incorrectly throws SYNTAX_ERR
instead of INDEX_SIZE_ERR
.
See also
- Creator method in {{domxref("CanvasRenderingContext2D")}}.
- The {{HTMLElement("canvas")}} element and its associated interface, {{domxref("HTMLCanvasElement")}}.