HTML canvas addColorStop() Method

Example

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);

Try this code ❯

Meaning

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

Standard Syntax

JavaScript syntax:

context.addColorStop(stop,color);

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.