Chapter 43: Canvas Gradients
Canvas 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 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 gradients feel completely natural and easy to use.
Canvas Gradients – From Zero to Confident
1. The single most important mental model about gradients in Canvas
A gradient in Canvas is not a color you apply once and forget. It is a special paint recipe you create in advance, give it a name (an object), and then use that recipe as the current fillStyle or strokeStyle.
Once you set ctx.fillStyle = myGradient, every fill or stroke command after that will use that gradient — until you change fillStyle again.
Key sentence to remember forever:
In Canvas, gradients are paint objects you create once with createLinearGradient() or createRadialGradient(), then assign to fillStyle / strokeStyle like any other color.
2. Two main types of gradients (you will use these 95% of the time)
| Type | Command | How it spreads | Best for |
|---|---|---|---|
| Linear Gradient | createLinearGradient(x0,y0,x1,y1) | Straight line from point A → point B | Buttons, backgrounds, bars, sunsets |
| Radial Gradient | createRadialGradient(x0,y0,r0,x1,y1,r1) | From inner circle → outer circle | Orbs, glows, spotlights, shiny buttons |
3. Step-by-step: How to create & use a gradient (the pattern you’ll repeat forever)
- Create the gradient object
- Add color stops (where & which color)
- Assign it to fillStyle or strokeStyle
- Draw something → it gets filled/stroked with the gradient
4. Minimal complete linear 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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas – First Linear 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'); // Step 1: Create gradient object // from left (0%) to right (100%) const grad = ctx.createLinearGradient(0, 0, canvas.width, 0); // Step 2: Add color stops grad.addColorStop(0, '#FFEB3B'); // yellow at start grad.addColorStop(0.5, '#FF9800'); // orange in middle grad.addColorStop(1, '#F44336'); // red at end // Step 3: Use the gradient as fill paint ctx.fillStyle = grad; // Step 4: Draw something → gets gradient fill ctx.fillRect(80, 80, 440, 240); // Label ctx.font = 'bold 32px Arial'; ctx.fillStyle = '#333'; ctx.textAlign = 'center'; ctx.fillText('Linear Gradient – Left to Right', 300, 380); </script> </body> </html> |
What you should see & remember forever:
- Gradient flows perfectly from left → right
- createLinearGradient(x0,y0,x1,y1) defines the direction line → here: (0,0) to (600,0) = horizontal left-to-right
- addColorStop(offset 0..1, color) → places colors along that line
- ctx.fillStyle = grad → now every fill uses this gradient
5. Example 2 – Vertical + diagonal linear gradients
|
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 |
<canvas id="c2" width="900" height="400"></canvas> <script> const canvas = document.getElementById('c2'); const ctx = canvas.getContext('2d'); // Helper to draw labeled rectangle with gradient function drawGradientRect(x, y, w, h, x0,y0,x1,y1, stops, label) { const grad = ctx.createLinearGradient(x0, y0, x1, y1); stops.forEach(([offset, color]) => grad.addColorStop(offset, color)); ctx.fillStyle = grad; ctx.fillRect(x, y, w, h); ctx.fillStyle = '#333'; ctx.font = '18px Arial'; ctx.textAlign = 'center'; ctx.fillText(label, x + w/2, y + h + 30); } // 1. Vertical gradient (top → bottom) drawGradientRect(80, 80, 240, 180, 80, 80, 80, 80+180, // top to bottom [[0, '#2196F3'], [1, '#0D47A1']], 'Vertical (top → bottom)'); // 2. Diagonal gradient drawGradientRect(380, 80, 240, 180, 380, 80, 380+240, 80+180, // top-left → bottom-right [[0, '#673AB7'], [0.5, '#9C27B0'], [1, '#E91E63']], 'Diagonal'); // 3. Reverse direction (right → left) drawGradientRect(680, 80, 240, 180, 680+240, 80, 680, 80, // right to left [[0, '#FFEB3B'], [1, '#F44336']], 'Reverse horizontal'); </script> |
Key lessons:
- Change x0,y0,x1,y1 → change direction
- More stops = smoother or more colorful transitions
- Gradient coordinates are absolute (not relative to the shape)
6. Radial Gradients – the glowing/orb cousin
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const radial = ctx.createRadialGradient( cx, cy, 20, // inner circle center + small radius cx, cy, 120 // outer circle center + large radius ); radial.addColorStop(0, 'white'); radial.addColorStop(0.4, '#FFEB3B'); radial.addColorStop(1, '#F44336'); ctx.fillStyle = radial; ctx.beginPath(); ctx.arc(cx, cy, 120, 0, Math.PI*2); ctx.fill(); |
Radial tip: Inner radius small + outer large = spotlight/glow effect Inner radius = 0 → sharp center Inner radius close to outer → thin ring
7. Your three tiny practice tasks (10–15 min each)
Task 1 – Sunset background Fill whole canvas with vertical gradient: orange (#FF9800) at top → deep purple (#673AB7) at bottom
Task 2 – Shiny button Draw rounded rectangle Fill with linear gradient (top-left light → bottom-right dark) Add white-to-transparent radial gradient overlay for shine (small inner radius)
Task 3 – Progress bar Gray background rectangle Green filled rectangle on top (width = 70% of total) Use linear gradient on green bar (light green → dark green)
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?
- How to choose x0,y0,x1,y1 for direction?
- Why gradients use absolute coordinates (not relative to shape)?
- Adding multiple color stops?
- Radial gradient inner vs outer circle?
- Something else?
Tell me — we’ll stay on gradients until you feel super confident creating any color transition you imagine.
You’re doing really well — gradients are one of the things that instantly make Canvas graphics look professional! 🚀
