Canvas createLinearGradient(): Linear Gradients with Color Stops

createLinearGradient(x0, y0, x1, y1) creates a CanvasGradient along a straight line between two points. Add colors with addColorStop(), assign the gradient to fillStyle or strokeStyle, and then draw the shape.

Basic linear gradient example Top ↑

const canvas = document.getElementById('my_canvas');
const ctx = canvas.getContext('2d');

const gradient = ctx.createLinearGradient(20, 0, 280, 0);
gradient.addColorStop(0, '#0d6efd');
gradient.addColorStop(1, '#dc3545');

ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 260, 100);

createLinearGradient() syntax Top ↑

const gradient = ctx.createLinearGradient(x0, y0, x1, y1);

The coordinates use the current Canvas coordinate space. They are not automatically relative to the rectangle or shape that receives the gradient.

Adding color stops Top ↑

Use addColorStop(offset, color) to define the colors along the gradient. The offset must be between 0 and 1, where 0 is the start and 1 is the end.

const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, 'navy');
gradient.addColorStop(0.5, 'cyan');
gradient.addColorStop(1, 'white');

You can add more than two color stops. An offset outside the range 0 to 1 is invalid, and the color must be a valid CSS color.

Interactive linear gradient demo Top ↑

Change the rectangle, gradient endpoints and colors. The optional guide line shows the direction of the gradient.

How the gradient direction works Top ↑

The line from (x0, y0) to (x1, y1) controls the direction and scale of the transition. A horizontal line produces a left-to-right gradient, a vertical line produces a top-to-bottom gradient, and a diagonal line produces a diagonal transition.

// Horizontal
ctx.createLinearGradient(0, 0, 300, 0);

// Vertical
ctx.createLinearGradient(0, 0, 0, 150);

// Diagonal
ctx.createLinearGradient(0, 0, 300, 150);

Use a linear gradient for fills or strokes Top ↑

A CanvasGradient can be assigned to either fillStyle or strokeStyle.

const gradient = ctx.createLinearGradient(0, 0, 250, 0);
gradient.addColorStop(0, 'purple');
gradient.addColorStop(1, 'orange');

ctx.strokeStyle = gradient;
ctx.lineWidth = 12;
ctx.strokeRect(20, 20, 220, 90);

See fillStyle and strokeStyle for the two drawing properties.

Creating a sharp color transition Top ↑

Two color stops at the same offset can create a hard transition instead of a smooth blend.

const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.5, 'blue');
gradient.addColorStop(0.5, 'orange');
gradient.addColorStop(1, 'orange');

Common linear gradient mistakes Top ↑

• Assuming gradient coordinates are relative to the shape. They use the current Canvas coordinate space.
• Forgetting to add color stops before assigning and using the gradient.
• Using an addColorStop() offset below 0 or above 1.
• Using identical start and end coordinates. A useful linear gradient needs two different points.
• Creating a gradient but forgetting to assign it to fillStyle or strokeStyle.

Accessibility note Top ↑

A Canvas gradient is visual pixels, not semantic content. If its colors communicate values, status or categories, provide the same information in accessible HTML or text and do not rely on color alone.

Frequently asked questions Top ↑

What does createLinearGradient() return? Top ↑

It returns a CanvasGradient object that can be assigned to fillStyle or strokeStyle.

What range can addColorStop() use? Top ↑

The offset must be between 0 and 1, inclusive.

Can a linear gradient have more than two colors? Top ↑

Yes. Add as many color stops as the design requires.

Are gradient coordinates relative to fillRect()? Top ↑

No. The gradient coordinates use the current Canvas coordinate space rather than the rectangle's own width and height.

Can I use the same gradient for an outline? Top ↑

Yes. Assign the CanvasGradient to strokeStyle and then draw a stroked path or rectangle.

Related Canvas tutorials Top ↑

Canvas tutorial | fillStyle | strokeStyle | fillRect() | Radial gradients

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: