Easy Tutorial
❮ Prop Style Alignitems Met Win Resizeto ❯

HTML canvas addColorStop() Method

Canvas Object

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:


Canvas Object

❮ Prop Style Alignitems Met Win Resizeto ❯