HTML canvas addColorStop() Method

❮ HTML canvas Reference


let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");

let grd = ctx.createLinearGradient(0, 0, 125, 0);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");

ctx.fillStyle = grd;
ctx.fillRect(25, 25, 100, 100);


The addColorStop() method specifies the colors and stop positions in a gradient object.

Standard Syntax

JavaScript syntax:


Browser Support


Parameter Values

Parameter Description
stop Specifies a value between 0.0 and 1.0 that represents the position between start and end in a gradient.
color Specifies a CSS color value to display at the stop position.
❮ HTML canvas Reference