HTML canvas createLinearGradient() Method

Example

// Accessing the element
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 createLinearGradient() method creates a linear gradient (to use on canvas content).

Standard Syntax

JavaScript syntax:

context.createLinearGradient(x0,y0,x1,y1);

Parameter Values

Parameter	Description
x0	Specifies the x-coordinate of the start point of the gradient.
y0	Specifies the y-coordinate of the start point of the gradient.
x1	Specifies the x-coordinate of the end point of the gradient.
y1	Specifies the y-coordinate of the end point of the gradient.