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: