Canvas createLinearGradient() Method
Example
Define a gradient (left to right) that goes from black to white, as the fill style for the rectangle:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create a Gradient
const grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
// Draw a filled Rectangle
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);
Try it Yourself »
Description
The createLinearGradient() method creates a linear gradient object.
The gradient object can be used to fill rectangles, circles, lines, text, etc.
The gradient object can be used as value to strokeStyle or fillStyle properties.
Note
You must add a color stop to a gradient object to make the gradient visible.
See Also:
The createRadialGradient() Method (Create gradiant object)
The addColorStop() Method (Add gradiant stop point)
The fillStyle Property (Set fill color/style)
The strokeStyle Property (Set stroke color/style)
Syntax
| context.createLinearGradient(x0, y0, x1, y1) |
Parameter Values
| Param | Description | Play it |
|---|---|---|
| x0 | The x-coordinate of the start point of the gradient | Play it » |
| y0 | The y-coordinate of the start point of the gradient | |
| x1 | The x-coordinate of the end point of the gradient | |
| y1 | The y-coordinate of the end point of the gradient |
Return Value
| Type | Description |
|---|---|
| Object | Linear gradient object |
More Examples
Example
Define a gradient (top to bottom) as the fill style for the rectangle:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create Gradient
const my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
// Fill Rectangle
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
Try it Yourself »
Example
Define a gradient that goes from black, to red, to white, as the fill style for the rectangle:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create Gradient
const my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(0.5, "red");
my_gradient.addColorStop(1, "white");
// Fill Rectangle
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
Try it Yourself »
Browser Support
The <canvas> element is an HTML5 standard (2014).
createLinearGradient() is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Canvas Reference