How to Create a Linear Gradient in Canvas (JavaScript)

Linear Gradient

Medium

canvas

math

colors

Build a linear gradient by computing each pixel color from its projection onto a segment.

Goal

Render a smooth linear gradient into ImageData.

The gradient should start as red near the first point and become blue near the second point.
Compute each pixel based on how far is it from start and end points.

Implement the math helpers and fill the image buffer so the final frame draws the generated gradient with ctx.putImageData(...).

JavaScript

Preview • sandboxed

Console output

Gradient

Many of us have seen gradient images countless times, and many have also used built-in functions to create gradients in code. But how many have actually thought about how gradient rendering works under the hood 🤔? Let's break it down.

To begin with, in computer graphics, a gradient is a smooth transition from one color to another. There are 2 types of gradients: linear and radial. A linear gradient describes a color change along a straight line. A radial gradient spreads outward from a central point (or ellipse). In this task, we will look at how a linear gradient works.

How it works

A gradient is defined by two points: the start A and the end B.
Each pixel is projected onto line AB to get the normalized distance delta from the endpoints.
delta = 0 means the pixel has the same color as point A.
delta = 1 means the pixel has the same color as point B.
Each color channel (red, green, and blue) is calculated separately using interpolation, that is, by finding an intermediate value.
The resulting rgb value is written into the image at the pixel's coordinates.

Now let's look in more detail at how to find delta and how to use it. Suppose the starting point A has coordinates

(x_1,y_1)

and color

(r_1,g_1,b_1)

, and point B has coordinates

(x_2,y_2)

and color

(r_2,g_2,b_2)

. We also have an arbitrary point P on the screen with coordinates

(x,y)

and color

(r,g,b)

, which is what we need to find. Let X be the projection of P onto AB. This is what it looks like: vectors

From this, the value of delta is:

delta = \frac{AX}{AB}

But we do not know the length of segment AX or the length of segment AB. So how do we find delta? This is where vector theory comes in.

Let us consider 3 vectors:

\vec{AP}

\vec{AB}

, and

\vec{AX}

. From vector theory, we can represent the dot product

\vec{AP} \cdot \vec{AB}

as:

\vec{AP} \cdot \vec{AB}=|AP| \cdot |AB| \cdot cos(\alpha)

Here,

|\vec{x}|

is the magnitude, or length of vector

\vec{x}

, and

\alpha

is the angle between the vectors. The magnitude of vector

\vec{AX}

is:

|\vec{AX}| = |AP| \cdot cos(\alpha)

From this we get:

\vec{AP} \cdot \vec{AB}=|AX| \cdot |AB| = delta \cdot |AB| \cdot |AB| = delta \cdot \vec{AB} \cdot \vec{AB}

So in vector form, we can express delta as:

delta=\frac{\vec{AP} \cdot \vec{AB}}{\vec{AB} \cdot \vec{AB}}

Now let's convert this formula using the coordinate form of the dot product. We will skip the full derivation to avoid a long theoretical explanation and jump straight to the result:

delta=\frac{(x-x_1)(x_2-x_1) + (y-y_1)(y_2-y_1)}{(x_2-x_1)^2+(y_2-y_1)^2}

Since point P may lie outside the rectangle

(x_1,y_1,x_2,y_2)

, delta can be negative or greater than one. In that case, we need to use the function

clamp(v,min,max)

, which returns

v

v

lies within the interval

(min,max)

, or the nearest boundary value otherwise:

delta_c=clamp(delta, 0, 1)

Finally, once we know delta, which tells us how far the point is from the start and the end, we can calculate how much each endpoint color contributes. For this, we use interpolation, meaning we find an intermediate value:

r=r_1 + (r_2 - r_1) \cdot delta

g=g_1 + (g_2 - g_1) \cdot delta

b=r_1 + (b_2 - b_1) \cdot delta

This is how the color of every pixel on the screen is determined.

To fill the screen pixel by pixel, we can use the context function ctx.createImageData. It creates an image with an internal data buffer, which is a one-dimensional array. Every four elements define a pixel's color: data[i]=r, data[i+1]=g, data[i+2]=b, data[i+3]=alpha. The alpha channel defines the pixel's transparency, but we do not need it here, so we set it to 255.

So now we know how to build a linear gradient. Take on the challenge and try implementing this algorithm in practice. Good luck 💪.

Walkthrough

Gradient

How it works