If a linear gradient's direction line is horizontal but fills a tall vertical rectangle, what happens?

Colors still transition left-to-right, ignoring the shape's orientation

Canvas automatically rotates the gradient to match the shape

The gradient fills top-to-bottom regardless of the line defined

Can more than two color stops be added to a single linear gradient?

Yes, any number of stops can be added at different positions

No, gradients are limited to exactly two color stops

No, more than two stops requires a radial gradient instead

Canvas Linear Gradient

createLinearGradient() and addColorStop() let you paint a Canvas shape with a smooth transition between colors along a straight line.

What Is a Linear Gradient?

A linear gradient is a smooth blend between two or more colors that progresses along a straight line you define. Instead of assigning a plain color string to fillStyle or strokeStyle, you assign a CanvasGradient object, and the Canvas 2D API interpolates the colors for every pixel the shape covers along that line.

Creating a Gradient with createLinearGradient()

The context method createLinearGradient(x0, y0, x1, y1) takes four coordinates describing the start point (x0, y0) and the end point (x1, y1) of an imaginary line. The gradient's colors are laid out along this line; anywhere in the canvas, the color used is determined by projecting that point onto the line. The method returns a CanvasGradient object which starts out completely transparent until you add color stops to it.

Example 1: A Simple Two-Color Gradient

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="340" height="200" style="border:1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Line runs left-to-right across the rectangle
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, "#ff512f");
gradient.addColorStop(1, "#f09819");

ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 300, 150);
</script>

</body>
</html>

Notice that the gradient's coordinates (0, 0) to (300, 0) don't have to match the rectangle's position exactly, but lining them up gives you a predictable, edge-to-edge blend. addColorStop(offset, color) accepts an offset between 0 (the start of the line) and 1 (the end of the line), and you can call it as many times as you like to build multi-color gradients.

addColorStop(offset, color) accepts an offset between 0 (the start of the line) and 1 (the end of the line).
You can call addColorStop() as many times as you like to build multi-color gradients.
Stops don't need to be added in order, but the browser sorts and renders them by offset, so ordering them yourself keeps the code readable.
Any valid CSS color string works: hex, rgb(), rgba(), hsl(), or named colors.
An end of the gradient that never gets its own stop simply extends the nearest defined stop's color flatly.

Example 2: A Multi-Stop Gradient

<!DOCTYPE html>
<html>
<body>

<canvas id="stripes" width="400" height="100" style="border:1px solid #ccc;"></canvas>

<script>
const ctx2 = document.getElementById("stripes").getContext("2d");

const rainbow = ctx2.createLinearGradient(0, 0, 400, 0);
rainbow.addColorStop(0, "#ff0000");
rainbow.addColorStop(0.25, "#ff9900");
rainbow.addColorStop(0.5, "#33cc33");
rainbow.addColorStop(0.75, "#3399ff");
rainbow.addColorStop(1, "#9933ff");

ctx2.fillStyle = rainbow;
ctx2.fillRect(0, 0, 400, 100);
</script>

</body>
</html>

Note: Gradients don't have to be horizontal or vertical. Pass diagonal coordinates like createLinearGradient(0, 0, 300, 200) to angle the color transition across a shape — useful for buttons, banners, and chart backgrounds that need a subtle depth effect.

Example 3: Gradient Stroke on a Diagonal Shape

<!DOCTYPE html>
<html>
<body>

<canvas id="diagonal" width="260" height="160" style="border:1px solid #ccc;"></canvas>

<script>
const ctx3 = document.getElementById("diagonal").getContext("2d");

// Diagonal line from top-left to bottom-right of the shape
const diag = ctx3.createLinearGradient(0, 0, 250, 150);
diag.addColorStop(0, "#00c6ff");
diag.addColorStop(1, "#0072ff");

ctx3.strokeStyle = diag;
ctx3.lineWidth = 12;
ctx3.strokeRect(20, 20, 220, 120);
</script>

</body>
</html>

Note: A CanvasGradient is tied to the coordinates you created it with, not to any particular shape. If you resize or move the shape later without recreating the gradient, the color band will no longer line up the way you expect — recompute the gradient whenever the shape's geometry changes.

Method	Purpose
createLinearGradient(x0, y0, x1, y1)	Creates a CanvasGradient along a straight line between two points
gradient.addColorStop(offset, color)	Inserts a color at a position (0 to 1) along the gradient line
ctx.fillStyle = gradient	Uses the gradient to fill shapes instead of a solid color
ctx.strokeStyle = gradient	Uses the gradient to stroke (outline) shapes instead of a solid color

Exercise: Canvas Linear Gradient

What do the four coordinates passed to createLinearGradient() represent?

Keep Going

Canvas Interview QuestionsPractice real questions asked for Canvas Frontend Developer SalarySee what Frontend Developer roles pay in the market Auto Apply for JobsApply to open roles related to Canvas and tweak your resume