Chapter 44: Canvas Radial Gradients
Canvas Radial Gradients in the clearest, most patient, step-by-step way possible.
Imagine I’m sitting right next to you with my laptop open. We’re going to build every single example together — slowly, with tiny complete snippets you can copy-paste and run immediately. No skipping steps, no magic formulas you don’t understand, just plain English explanations, visual thinking, common beginner traps, and repeated patterns until radial gradients feel completely natural and easy to control.
Canvas Radial Gradients – From Zero to Confident
1. The single most important sentence about radial gradients
A radial gradient in Canvas is a special paint recipe that spreads color outward from a central point (or small circle) toward a larger surrounding circle — like a glowing orb, a spotlight, a shiny button highlight, or a soft vignette.
It is not a straight line transition (that’s linear gradient). It is circular / radial — the color changes in rings from the inside out.
2. Mental model – Think of it like a flashlight or spotlight
- You define an inner circle (the bright/hot center)
- You define an outer circle (the fade-to-edge)
- You place color stops along the radius (from center → edge)
- The gradient fills everything between inner and outer circle
- Anything outside the outer circle is the last color stop (by default)
3. The command you will use 99% of the time: createRadialGradient
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
const gradient = ctx.createRadialGradient( innerX, // x of inner circle center innerY, // y of inner circle center innerRadius,// radius of inner circle (often 0 or very small) outerX, // x of outer circle center outerY, // y of outer circle center outerRadius // radius of outer circle (usually larger) ); |
Most common & beginner-friendly pattern (use this 90% of the time):
|
0 1 2 3 4 5 6 7 8 9 |
const grad = ctx.createRadialGradient( cx, cy, 0, // inner circle at center, radius 0 (sharp center) cx, cy, r // outer circle same center, radius r (full shape size) ); |
→ Inner radius = 0 → brightest spot exactly at center → Inner radius > 0 → bright ring instead of sharp dot
4. Minimal complete radial gradient example (copy → run)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas – First Radial Gradient</title> <style> canvas { border: 1px solid #ccc; background: #f8f9fa; display: block; margin: 40px auto; } </style> </head> <body> <canvas id="c" width="600" height="400"></canvas> <script> const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); // Center helpers const cx = canvas.width / 2; // 300 const cy = canvas.height / 2; // 200 // Step 1: Create radial gradient object const grad = ctx.createRadialGradient( cx, cy, 20, // inner circle: small bright spot cx, cy, 140 // outer circle: fades to edge ); // Step 2: Add color stops (from center → edge) grad.addColorStop(0, 'white'); // brightest center grad.addColorStop(0.3, '#FFEB3B'); // yellow grad.addColorStop(0.7, '#FF9800'); // orange grad.addColorStop(1, '#F44336'); // red at edge // Step 3: Use the gradient ctx.fillStyle = grad; // Step 4: Draw a shape that gets the gradient fill ctx.beginPath(); ctx.arc(cx, cy, 140, 0, Math.PI * 2); ctx.fill(); // Label ctx.font = 'bold 28px Arial'; ctx.fillStyle = '#333'; ctx.textAlign = 'center'; ctx.fillText('Radial Gradient – Glowing Orb', cx, cy + 200); </script> </body> </html> |
What you should see & remember forever:
- Bright white/yellow center → fades through orange → red edge
- Inner radius = 20 → small bright core (not a sharp dot)
- Outer radius = 140 → matches circle radius → gradient fills exactly to edge
- addColorStop(offset 0..1, color) → offset 0 = inner circle, offset 1 = outer circle
5. Example 2 – Shiny button / highlight effect (very common pattern)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<canvas id="c2" width="600" height="300"></canvas> <script> const canvas = document.getElementById('c2'); const ctx = canvas.getContext('2d'); // Base button shape ctx.beginPath(); ctx.roundRect(100, 100, 400, 100, 50); // modern rounded rect ctx.fillStyle = '#2196F3'; ctx.fill(); // Add shine overlay with radial gradient const shine = ctx.createRadialGradient( 180, 140, 10, // inner: top-left-ish, small radius 180, 140, 180 // outer: larger fade ); shine.addColorStop(0, 'white'); // brightest highlight shine.addColorStop(0.4, 'white'); // still bright shine.addColorStop(0.7, 'rgba(255,255,255,0.3)'); shine.addColorStop(1, 'rgba(255,255,255,0)'); ctx.fillStyle = shine; ctx.fill(); // Text ctx.font = 'bold 48px Arial'; ctx.fillStyle = 'white'; ctx.textAlign = 'center'; ctx.fillText('Shiny Button', 300, 170); </script> |
Key lessons from this example:
- Radial gradient as overlay → creates realistic shine/highlight
- Inner circle offset (not center) → light comes from top-left (very natural look)
- Fade to transparent at outer edge → smooth blend into button color
6. Quick reference – Radial gradient patterns you’ll reuse often
| Effect / Look | Inner radius | Outer radius | Center offset? | Typical stops sequence |
|---|---|---|---|---|
| Sharp glowing orb | 0 | shape radius | No | white → color → dark color |
| Soft spotlight / vignette | 0–20 | large | No | white → fade to transparent |
| Shiny button highlight | 5–20 | 100–200 | Yes (top-left) | white → semi-transparent white → transparent |
| Metallic/chrome ring | 20–40 | shape radius | Slight offset | white → light gray → dark gray → black |
| Sunset radial background | 0 | canvas size | Top center | orange → purple → navy |
7. Your three tiny practice tasks (10–15 min each)
Task 1 – Glowing orb Draw a purple circle Fill with radial gradient: white center → purple → very dark purple edge
Task 2 – Shiny pill button Draw a long rounded rectangle (pill shape) Fill with blue gradient Add white radial gradient overlay for top-left shine
Task 3 – Spotlight effect Fill whole canvas with dark color Draw large radial gradient circle (white center → transparent edge) in the middle → creates spotlight
Paste any of them here when you finish — I’ll review it like we’re pair-programming together.
──────────────────────────────
Which part still feels a little slippery?
- Difference between linear vs radial gradients?
- How to choose inner vs outer radius?
- Why offset inner circle for shine/highlight?
- Adding multiple color stops smoothly?
- Radial gradient not filling the whole shape?
- Something else?
Tell me — we’ll stay on radial gradients until you feel super confident creating any glowing, shiny, or spotlight effect you imagine.
You’re doing really well — radial gradients are one of the things that instantly make Canvas graphics look polished and 3D-like! 🚀
