JavaScript Canvas createLinearGradient Tutorial
last modified April 3, 2025
In this article, we explore the Canvas createLinearGradient method in JavaScript. This powerful feature allows creating smooth color transitions for fills and strokes. Mastering gradients is essential for professional-looking graphics.
Basic Definition
The createLinearGradient method creates a gradient object that transitions colors along a straight line. It requires defining start and end points for the gradient direction. Color stops define where colors change along the line.
The method syntax is: createLinearGradient(x0, y0, x1, y1) where
(x0,y0) is the start point and (x1,y1) is the end point. Color stops are
added with addColorStop(position, color).
Basic Horizontal Gradient
This example demonstrates a simple horizontal gradient from red to blue.
<!DOCTYPE html>
<html>
<head>
<title>Basic Horizontal Gradient</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 200);
</script>
</body>
</html>
This creates a canvas with a left-to-right gradient. The gradient starts at (0,0) and ends at (300,0), covering the canvas width. Two color stops define the transition.
The first color stop at position 0 (start) is red. The second at position 1 (end) is blue. The gradient is applied as fill style to cover the entire canvas.
Diagonal Gradient with Multiple Colors
This example shows a diagonal gradient with three color stops.
<!DOCTYPE html>
<html>
<head>
<title>Diagonal Gradient</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 300, 200);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'green');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 200);
</script>
</body>
</html>
Here we create a diagonal gradient from top-left to bottom-right. The gradient has three color stops at positions 0, 0.5, and 1. This creates a smooth transition between three colors.
The gradient starts red at the top-left corner, becomes yellow in the middle, and ends green at the bottom-right corner. The fill covers the entire canvas.
Gradient Stroke for Text
This example applies a gradient to text stroke.
<!DOCTYPE html>
<html>
<head>
<title>Gradient Text Stroke</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(1, 'blue');
ctx.font = '48px Arial';
ctx.strokeStyle = gradient;
ctx.lineWidth = 2;
ctx.strokeText('Gradient', 50, 100);
</script>
</body>
</html>
This demonstrates applying a gradient to text outline. The gradient goes from left to right with three colors. The text is drawn with stroke only, no fill.
The gradient is horizontal (0,0 to 300,0) with color stops at 0, 0.5, and 1. The strokeText method renders the outlined text using the gradient stroke style.
Partial Gradient for Shape
This example shows how to apply gradient to part of a shape.
<!DOCTYPE html>
<html>
<head>
<title>Partial Gradient</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(100, 50, 200, 150);
gradient.addColorStop(0, 'cyan');
gradient.addColorStop(1, 'magenta');
ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 200, 100);
</script>
</body>
</html>
Here the gradient is defined for only part of the shape. The gradient area is smaller than the filled rectangle, creating an interesting visual effect.
The gradient runs from (100,50) to (200,150) while the rectangle covers (50,50) to (250,150). Areas outside the gradient use the nearest color stop.
Complex Gradient with Transparency
This example combines multiple gradients with transparency effects.
<!DOCTYPE html>
<html>
<head>
<title>Transparent Gradient</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Background gradient
const bgGradient = ctx.createLinearGradient(0, 0, 0, 200);
bgGradient.addColorStop(0, 'lightblue');
bgGradient.addColorStop(1, 'white');
ctx.fillStyle = bgGradient;
ctx.fillRect(0, 0, 300, 200);
// Transparent foreground gradient
const fgGradient = ctx.createLinearGradient(50, 50, 250, 150);
fgGradient.addColorStop(0, 'rgba(255,0,0,0.8)');
fgGradient.addColorStop(0.5, 'rgba(0,255,0,0.5)');
fgGradient.addColorStop(1, 'rgba(0,0,255,0.2)');
ctx.fillStyle = fgGradient;
ctx.fillRect(50, 50, 200, 100);
</script>
</body>
</html>
This example combines two gradients. First, a vertical background gradient is applied. Then a transparent foreground gradient is drawn on top.
The foreground gradient uses rgba colors with alpha transparency. This creates a see-through effect where the background shows through the foreground colors.
Source
MDN createLinearGradient Documentation
In this article, we have explored various techniques for creating and applying linear gradients in Canvas. These methods are essential for creating visually appealing graphics and interfaces in web applications.
Author
List all JS Canvas tutorials.