YouTipMet Canvas Addcolorstop
# HTML canvas addColorStop() Method
[ Canvas Object](#)
## Example
Define a gradient from black to white, used as the fill style for a rectangle:
YourbrowserdoesnotsupporttheHTML5canvastag.
JavaScriptοΌ
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
[Try it Β»](#)
* * *
## 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 element.
* * *
## Definition and Usage
The addColorStop() method specifies the colors and their positions in a gradient object.
The addColorStop() method is used together 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, representing the position between the start and end of the gradient. |
| _color_ | The (#) to display at the _stop_ position. |
* * *
## More Examples
## Example
Define a gradient using multiple addColorStop() methods:
Yourbrowserdoesnotsupportthecanvastag.
JavaScriptοΌ
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8",