Canvas Radial Gradient
createRadialGradient() blends colors between two circles, making it the tool for glows, spheres, and spotlight effects.
What Is a Radial Gradient?
A radial gradient transitions colors between two circles instead of along a straight line. One circle marks where the gradient begins, the other marks where it ends, and the colors expand or contract smoothly between them — this is what gives radial gradients their signature glowing, spherical look.
Creating a Gradient with createRadialGradient()
The method createRadialGradient(x0, y0, r0, x1, y1, r1) takes six values: the center and radius of the starting circle (x0, y0, r0), and the center and radius of the ending circle (x1, y1, r1). When both circles share the same center and the starting radius is 0, you get a classic radiating glow; offsetting the centers creates a more directional, 3D-looking highlight.
Example 1: A Basic Glow
<!DOCTYPE html>
<html>
<body>
<canvas id="glowCanvas" width="300" height="200" style="border:1px solid #ccc;"></canvas>
<script>
const canvas = document.getElementById("glowCanvas");
const ctx = canvas.getContext("2d");
// Same center, growing from a point (r0 = 0) to a 100px circle
const glow = ctx.createRadialGradient(150, 100, 0, 150, 100, 100);
glow.addColorStop(0, "#ffffff");
glow.addColorStop(1, "#3366ff");
ctx.fillStyle = glow;
ctx.fillRect(0, 0, 300, 200);
</script>
</body>
</html>addColorStop() works exactly the same way here as it does for linear gradients — offset 0 is the inner circle, offset 1 is the outer circle, and everything in between is interpolated across the ring-shaped area between the two circles.
- x0, y0, r0 describe the inner (start) circle; x1, y1, r1 describe the outer (end) circle.
- Setting r0 to 0 makes the gradient start from a single point, producing a classic radial glow.
- Offsetting the two centers from each other (rather than stacking them) produces a 3D sphere-like highlight, as if lit from one side.
- Pixels outside the outer circle take on the color of the last color stop, and pixels inside a positive r0 take on the color of the first stop.
- Radial gradients are commonly combined with arc() to draw glowing circles, planets, or light sources.
Example 2: A Sphere with an Offset Highlight
<!DOCTYPE html>
<html>
<body>
<canvas id="sphereCanvas" width="300" height="260" style="border:1px solid #ccc;"></canvas>
<script>
const ctx2 = document.getElementById("sphereCanvas").getContext("2d");
// Highlight circle is offset up-left from the sphere's center
const sphere = ctx2.createRadialGradient(110, 90, 10, 150, 130, 90);
sphere.addColorStop(0, "#ffffff");
sphere.addColorStop(0.4, "#ff8a65");
sphere.addColorStop(1, "#b71c1c");
ctx2.fillStyle = sphere;
ctx2.beginPath();
ctx2.arc(150, 130, 90, 0, Math.PI * 2);
ctx2.fill();
</script>
</body>
</html>Example 3: Layered Radial Gradients
<!DOCTYPE html>
<html>
<body>
<canvas id="nebulaCanvas" width="400" height="300" style="border:1px solid #ccc;"></canvas>
<script>
const ctx3 = document.getElementById("nebulaCanvas").getContext("2d");
ctx3.fillStyle = "#020111";
ctx3.fillRect(0, 0, 400, 300);
// Draw several soft glowing circles at different positions
const points = [
{ x: 100, y: 100, color: "rgba(123, 97, 255, 0.8)" },
{ x: 280, y: 160, color: "rgba(0, 200, 255, 0.6)" },
{ x: 200, y: 230, color: "rgba(255, 100, 180, 0.5)" }
];
points.forEach((p) => {
const g = ctx3.createRadialGradient(p.x, p.y, 0, p.x, p.y, 70);
g.addColorStop(0, p.color);
g.addColorStop(1, "rgba(0, 0, 0, 0)");
ctx3.fillStyle = g;
ctx3.fillRect(p.x - 70, p.y - 70, 140, 140);
});
</script>
</body>
</html>Exercise: Canvas Radial Gradient
How many circles are defined when creating a radial gradient?
