Chapter 43: Canvas Linear Gradient
1. What is a Linear Gradient in Canvas? (Clear definition first)
A linear gradient in Canvas means a smooth color transition that changes gradually along a straight line — from one color to another (or several colors) in a specific direction.
Examples you see every day:
- Buttons that look shiny or 3D (light color on top → dark color on bottom)
- Backgrounds that fade from blue to purple
- Progress bars that go from green to red
- Sky in simple games (light blue at top → darker at bottom)
- Metallic / plastic / glass effects
In Canvas, a linear gradient is not a single color — it’s a recipe that tells the browser:
- Where the color change starts (point 1)
- Where it ends (point 2)
- What colors to use at different points along that line
2. How to Create & Use a Linear Gradient (Core Steps)
You need three main steps:
- Create the gradient object with createLinearGradient(x0, y0, x1, y1)
- Add color stops with addColorStop(offset, color)
- Assign it to fillStyle or strokeStyle and draw your shape
Basic syntax:
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const gradient = ctx.createLinearGradient(x0, y0, x1, y1); // x0,y0 = starting point // x1,y1 = ending point gradient.addColorStop(0, 'yellow'); // 0% position = yellow gradient.addColorStop(1, 'red'); // 100% position = red ctx.fillStyle = gradient; // use it ctx.fillRect(...); |
3. Your First Linear Gradient – Horizontal Fade (Copy-Paste & Run)
Create canvas-linear-gradient.html:
HTML
|
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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Linear Gradient – First Example</title> <style> canvas { border: 4px solid #2c3e50; background: #f8f9fa; display: block; margin: 30px auto; } h1 { text-align: center; color: #34495e; } </style> </head> <body> <h1>Canvas Linear Gradient – Smooth Color Fade</h1> <canvas id="gradCanvas" width="700" height="400"></canvas> <script> const canvas = document.getElementById('gradCanvas'); const ctx = canvas.getContext('2d'); // Background ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // === 1. Horizontal gradient: left to right === const grad1 = ctx.createLinearGradient(50, 100, 650, 100); // from x=50 to x=650 (horizontal line) grad1.addColorStop(0, '#ff6b6b'); // start – red grad1.addColorStop(0.5, '#feca57'); // middle – yellow-orange grad1.addColorStop(1, '#1e90ff'); // end – blue ctx.fillStyle = grad1; ctx.fillRect(50, 50, 600, 150); ctx.font = '32px Arial'; ctx.fillStyle = 'white'; ctx.textAlign = 'center'; ctx.fillText('Horizontal Gradient', 350, 130); // === 2. Vertical gradient: top to bottom === const grad2 = ctx.createLinearGradient(100, 250, 100, 400); // same x, different y → vertical grad2.addColorStop(0, '#8e44ad'); // top – purple grad2.addColorStop(1, '#3498db'); // bottom – blue ctx.fillStyle = grad2; ctx.fillRect(100, 250, 500, 150); ctx.fillStyle = 'white'; ctx.fillText('Vertical Gradient', 350, 330); // === 3. Diagonal gradient === const grad3 = ctx.createLinearGradient(50, 450, 650, 450 + 100); // from top-leftish to bottom-rightish grad3.addColorStop(0, '#27ae60'); grad3.addColorStop(1, '#c0392b'); ctx.fillStyle = grad3; ctx.fillRect(50, 450, 600, 100); ctx.fillStyle = 'white'; ctx.fillText('Diagonal Gradient', 350, 500); </script> </body> </html> |
What you see:
- Three rectangles with different gradient directions
- Horizontal: red → yellow → blue
- Vertical: purple → blue
- Diagonal: green → red
4. All Important Parts of Linear Gradients (With Copy-Paste Snippets)
A. Gradient Direction (x0,y0 → x1,y1)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Horizontal left → right ctx.createLinearGradient(0, 0, canvas.width, 0); // Vertical top → bottom ctx.createLinearGradient(0, 0, 0, canvas.height); // Diagonal top-left → bottom-right ctx.createLinearGradient(0, 0, canvas.width, canvas.height); // Diagonal bottom-left → top-right ctx.createLinearGradient(0, canvas.height, canvas.width, 0); |
B. Multiple Color Stops (more than 2 colors)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const rainbow = ctx.createLinearGradient(0, 0, canvas.width, 0); rainbow.addColorStop(0, 'red'); rainbow.addColorStop(0.17, 'orange'); rainbow.addColorStop(0.33, 'yellow'); rainbow.addColorStop(0.5, 'green'); rainbow.addColorStop(0.67, 'blue'); rainbow.addColorStop(0.83, 'indigo'); rainbow.addColorStop(1, 'violet'); ctx.fillStyle = rainbow; ctx.fillRect(0, 0, canvas.width, canvas.height); |
C. Gradient on Stroke (Border / Line)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const gradStroke = ctx.createLinearGradient(100, 100, 600, 100); gradStroke.addColorStop(0, '#ff6b6b'); gradStroke.addColorStop(1, '#1e90ff'); ctx.beginPath(); ctx.arc(350, 200, 120, 0, Math.PI * 2); ctx.strokeStyle = gradStroke; ctx.lineWidth = 40; ctx.stroke(); |
→ Thick rainbow ring
D. Semi-transparent Gradient
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 |
const fade = ctx.createLinearGradient(0, 0, 0, canvas.height); fade.addColorStop(0, 'rgba(255,255,255,0.9)'); fade.addColorStop(1, 'rgba(255,255,255,0)'); ctx.fillStyle = fade; ctx.fillRect(0, 0, canvas.width, canvas.height); |
→ Top-to-bottom white fade overlay
5. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Gradient coordinates are relative to the canvas, not the shape — so createLinearGradient(0,0,canvas.width,0) always goes full horizontal
- Use 0 to 1 for addColorStop(offset) — 0 = start, 1 = end
- Common mistake #1: Forget to assign gradient to fillStyle or strokeStyle → solid color instead
- Common mistake #2: Wrong coordinates → gradient goes in unexpected direction
- Pro tip: Use online gradient generators (like cssgradient.io) → copy colors → paste into addColorStop
- Pro tip 2: Combine with globalAlpha or rgba for transparency effects
Understood Canvas Linear Gradient fully now? This is one of the most beautiful and most-used features in Canvas — almost every modern button, background, progress bar, card, chart, and loader uses linear gradients.
Tell me what you want next — we can build on this:
- Full animated gradient shift (moving shine)?
- Radial gradient (circular / orb style)?
- Gradient on text or stroke only?
- Glassmorphism card with gradient + blur?
- Or 15-question linear gradient quiz?
Just say — we keep going step by step together! 🚀
