HTML canvas addColorStop()
Method
Example
Define a gradient from black to white as the fill style for the rectangle:
JavaScript:
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the addColorStop()
method.
Note: Internet Explorer 8 and earlier versions do not support the <canvas>
element.
Definition and Usage
The addColorStop()
method specifies the color and position in a gradient object.
The addColorStop()
method is used with createLinearGradient() or createRadialGradient().
Note: You can call the addColorStop()
method multiple times to change the gradient. If you do not use this method on a gradient object, the gradient will not be visible. To get a visible gradient, you need to create at least one color stop.
| JavaScript Syntax: | gradient.addColorStop(stop, color);
|
| --- | --- |
Parameter Values
Parameter | Description |
---|---|
stop | A value between 0.0 and 1.0 that represents the position between the start and end of the gradient. |
color | A CSS color value displayed at the stop position. |
More Examples
Example
Define a gradient using multiple addColorStop()
methods:
JavaScript: