Chapter 37: Canvas Fill and Stroke
Canvas Fill and Stroke in the most detailed, slow, step-by-step, human-teacher way possible. 😊
I’m going to explain everything like I’m sitting next to you in a Hyderabad computer lab — no rushing, full classroom style, simple everyday English, lots of copy-paste examples you can run right now, and all the little tips & common mistakes students always make.
1. What are Fill and Stroke actually? (Clear definition first)
In Canvas (the <canvas> element + JavaScript drawing), fill and stroke are the two main ways you color what you draw.
Think of it like real painting:
- Fill = the inside color / paint bucket / solid color that fills the shape completely (like filling a circle with red paint)
- Stroke = the border / outline / pen stroke / line around the shape (like drawing the edge of the circle with a black marker)
Key rules everyone must remember from day one:
- Fill colors the area inside a closed shape (rectangle, circle, path, polygon…)
- Stroke colors the edge / line (whether the shape is closed or open)
- You can use both at the same time on the same shape
- You can use only fill (no border)
- You can use only stroke (no inside color — very common for lines, borders, outlines)
- If you forget both → shape is invisible!
2. Your First Fill & Stroke Example – Side-by-Side Comparison (Copy-Paste & Run)
Create canvas-fill-stroke.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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Fill vs Stroke</title> <style> canvas { border: 4px solid #2c3e50; background: #f8f9fa; display: block; margin: 30px auto; } h1 { text-align: center; color: #34495e; } .container { max-width: 800px; margin: auto; padding: 20px; } </style> </head> <body> <div class="container"> <h1>Fill vs Stroke – Let's See the Difference</h1> <canvas id="myCanvas" width="700" height="500"></canvas> </div> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // Background ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // === 1. Only Fill (no border) === ctx.fillStyle = '#3498db'; // blue ctx.fillRect(50, 50, 200, 150); ctx.font = '20px Arial'; ctx.fillStyle = 'white'; ctx.fillText('Only Fill', 150, 130); // === 2. Only Stroke (no inside color) === ctx.strokeStyle = '#e74c3c'; // red ctx.lineWidth = 12; ctx.strokeRect(300, 50, 200, 150); ctx.fillStyle = '#2c3e50'; ctx.fillText('Only Stroke', 400, 130); // === 3. Both Fill + Stroke === ctx.fillStyle = '#2ecc71'; // green ctx.strokeStyle = '#27ae60'; // darker green border ctx.lineWidth = 10; ctx.beginPath(); ctx.roundRect(50, 250, 200, 150, 30); // rounded corners ctx.fill(); ctx.stroke(); ctx.fillStyle = 'white'; ctx.fillText('Fill + Stroke', 150, 330); // === 4. Transparent fill + thick stroke === ctx.fillStyle = 'rgba(155, 89, 182, 0.4)'; // purple semi-transparent ctx.strokeStyle = '#9b59b6'; ctx.lineWidth = 15; ctx.beginPath(); ctx.arc(500, 325, 80, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); ctx.fillStyle = '#2c3e50'; ctx.fillText('Semi-transparent Fill + Thick Stroke', 500, 440); </script> </body> </html> |
What you see:
- Four shapes side by side
-
- Solid blue rectangle (only fill)
-
- Red border rectangle (only stroke)
-
- Green rounded rectangle with border (both fill + stroke)
-
- Purple circle with thick border (semi-transparent fill + stroke)
3. All Important Fill & Stroke Properties (With Examples)
A. fillStyle & strokeStyle (Color)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Named colors ctx.fillStyle = 'orange'; ctx.strokeStyle = 'purple'; // Hex ctx.fillStyle = '#e67e22'; ctx.strokeStyle = '#8e44ad'; // RGB / RGBA (transparency) ctx.fillStyle = 'rgb(52, 152, 219)'; ctx.fillStyle = 'rgba(231, 76, 60, 0.6)'; // 60% opacity // HSL (great for themes) ctx.fillStyle = 'hsl(120, 100%, 50%)'; // bright green |
B. lineWidth (Stroke thickness)
JavaScript
|
0 1 2 3 4 5 6 7 |
ctx.lineWidth = 4; // thin ctx.lineWidth = 20; // very thick |
C. lineCap (How line ends look)
JavaScript
|
0 1 2 3 4 5 6 7 8 |
ctx.lineCap = 'butt'; // flat cut (default) ctx.lineCap = 'round'; // soft rounded ends (most beautiful) ctx.lineCap = 'square'; // square ends |
D. lineJoin (How corners look)
JavaScript
|
0 1 2 3 4 5 6 7 8 |
ctx.lineJoin = 'miter'; // sharp point (default) ctx.lineJoin = 'round'; // smooth curve at corners ctx.lineJoin = 'bevel'; // flat cut at corners |
E. Global transparency (affects both fill & stroke)
JavaScript
|
0 1 2 3 4 5 6 7 8 |
ctx.globalAlpha = 0.5; // 50% transparent for everything drawn after this // Draw something... ctx.globalAlpha = 1; // reset to full opacity |
Better way — use fill-opacity style (not global):
JavaScript
|
0 1 2 3 4 5 6 |
ctx.fillStyle = 'rgba(46, 204, 113, 0.4)'; // green with 40% opacity |
4. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Always set fillStyle or strokeStylebefore drawing — they don’t apply retroactively
- If you want no fill → fillStyle = ‘transparent’ or skip fill()
- If you want no stroke → skip stroke() or set strokeStyle = ‘transparent’
- Common mistake #1: Draw shape but forget fill() or stroke() → invisible!
- Common mistake #2: Use fillStyle for stroke or vice versa → wrong color
- Pro tip: Use ctx.save() / ctx.restore() when changing styles temporarily
JavaScript
|
0 1 2 3 4 5 6 7 8 9 |
ctx.save(); ctx.fillStyle = 'red'; ctx.fillRect(10, 10, 50, 50); ctx.restore(); // back to previous color |
Understood Canvas Fill and Stroke fully now? These two properties control almost every color decision in canvas drawing — master them and you’re 50% there.
Tell me what you want next — we can build on this:
- Full paint app (click to fill, drag to stroke)?
- Animated color-changing shapes?
- Gradient fill + stroke combo?
- Dashed stroke patterns?
- Or 15-question Fill & Stroke quiz?
Just say — we keep going step by step together! 🚀
