Canvas createRadialGradient(): Radial Gradients with Two Circles

createRadialGradient(x0, y0, r0, x1, y1, r1) creates a CanvasGradient between two circles. Add colors with addColorStop(), assign the gradient to fillStyle or strokeStyle, and then draw a shape.

Basic radial gradient example Top ↑

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

const gradient = ctx.createRadialGradient(
  150, 100, 20,
  150, 100, 80
);
gradient.addColorStop(0, '#f50000');
gradient.addColorStop(1, '#8cf5f5');

ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 300, 160);

createRadialGradient() syntax Top ↑

const gradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

Both radii must be non-negative finite numbers. A negative radius causes an error. The gradient coordinates use the current Canvas coordinate space, so they are not automatically relative to the rectangle or shape that receives the gradient.

Adding color stops Top ↑

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

const gradient = ctx.createRadialGradient(
  150, 100, 10,
  150, 100, 90
);
gradient.addColorStop(0, 'white');
gradient.addColorStop(0.5, 'gold');
gradient.addColorStop(1, 'darkred');

You can add more than two stops. Each color must be a valid CSS color.

Interactive radial gradient demo Top ↑

Change the rectangle, the two gradient circles, and the colors. Enable the guides to see the circles used to construct the gradient.

Using the same or different circle centers Top ↑

If both circles share the same center, the gradient radiates evenly around that point. Moving the start circle away from the end circle creates an off-center highlight that can be useful for sphere, glow, spotlight, and lighting effects.

// Concentric circles
ctx.createRadialGradient(100, 100, 10, 100, 100, 80);

// Offset start circle
ctx.createRadialGradient(85, 80, 10, 100, 100, 80);

Use radial gradients for fills or strokes Top ↑

A radial CanvasGradient can be assigned to either fillStyle or strokeStyle.

const gradient = ctx.createRadialGradient(
  120, 70, 5,
  120, 70, 120
);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'blue');

ctx.strokeStyle = gradient;
ctx.lineWidth = 16;
ctx.strokeRect(20, 20, 200, 100);

See fillStyle and strokeStyle for the drawing properties that accept gradients.

Linear gradient vs radial gradient Top ↑

See the Canvas linear gradient tutorial for the straight-line version.

Common radial gradient mistakes Top ↑

• Using createLinearGradient() when the intended effect needs two circles.
• Passing a negative value for r0 or r1.
• Assuming the gradient coordinates are relative to the rectangle. They use the current Canvas coordinate space.
• Forgetting to add color stops before using the gradient.
• Creating the gradient but forgetting to assign it to fillStyle or strokeStyle.
• Using an addColorStop() offset below 0 or above 1.

Accessibility note Top ↑

Canvas gradients are visual pixels rather than semantic HTML. If the colors communicate values, categories, status, or other important information, provide the same meaning in accessible text or HTML and do not rely on color alone.

Frequently asked questions Top ↑

What does createRadialGradient() return? Top ↑

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

How many circles define a radial gradient? Top ↑

Two circles define it: a start circle using x0, y0, r0 and an end circle using x1, y1, r1.

Can the two circles have different centers? Top ↑

Yes. Different centers create an offset radial effect, which can be useful for highlights and lighting.

Can a circle radius be zero? Top ↑

Yes. A radius can be zero, but it cannot be negative and must be finite.

Are radial-gradient coordinates relative to fillRect()? Top ↑

No. They use the current Canvas coordinate space rather than the rectangle's own dimensions.

Related Canvas tutorials Top ↑

Canvas tutorial | fillStyle | strokeStyle | fillRect() | Linear 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: