HTML canvas createLinearGradient() Method

❮ HTML canvas Reference

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

Meaning

The createLinearGradient() method creates a linear gradient (to use on canvas content).


Standard Syntax

JavaScript syntax:

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



Browser Support




Status







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.
❮ HTML canvas Reference