Latest web development tutorials
 

HTML canvas addColorStop() Method

< Canvas Object

Example

Define a gradient that goes from black to white, as the fill style for the 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 Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
addColorStop() 4.0 9.0 3.6 4.0 10.1

Definition and Usage

The addColorStop() method specifies the colors and position 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 a gradient. If you omit this method for gradient objects, the gradient will not be visible. You need to create at least one color stop to have a visible gradient.

JavaScript syntax: gradient.addColorStop(stop,color);

Parameter Values

Parameter Description Play it
stop A value between 0.0 and 1.0 that represents the position between start and end in a gradient Play it »
color A CSS color value to display at the stop position Play it »

Examples

More Examples

Example

Define a gradient with 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","yellow");
grd.addColorStop(1,"red");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Try it Yourself »

< Canvas Object