Chapter 39: Canvas Rectangles
1. What are “Canvas Rectangles” actually?
Canvas Rectangles means using JavaScript on the <canvas> element to draw rectangular shapes — normal rectangles, squares, rounded rectangles, filled rectangles, bordered rectangles, transparent rectangles, gradient rectangles, shadowed rectangles, and so on.
Rectangles are the easiest and most frequently used shape in Canvas because:
- They form backgrounds
- They make buttons, cards, panels, borders
- They are used for cropping images
- They create charts (bar charts = filled rectangles)
- They act as bounding boxes, hit areas, overlays
There are three main methods to draw rectangles:
- fillRect(x, y, width, height) → filled (solid color / gradient / pattern)
- strokeRect(x, y, width, height) → only border / outline
- rect(x, y, width, height) + fill() / stroke() → more flexible (can combine with other path commands)
- roundRect(x, y, width, height, radius) → modern rounded corners (supported in all browsers 2025+)
2. Your First Canvas Rectangle – Hello World Style (Copy-Paste & Run)
Create canvas-rectangle-hello.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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Rectangles – 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 Rectangles – Let's Draw Boxes!</h1> <canvas id="rectCanvas" width="700" height="500"></canvas> <script> const canvas = document.getElementById('rectCanvas'); const ctx = canvas.getContext('2d'); // Light background ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // === 1. Simple filled rectangle === ctx.fillStyle = '#3498db'; // blue ctx.fillRect(50, 50, 250, 150); ctx.font = '24px Arial'; ctx.fillStyle = 'white'; ctx.textAlign = 'center'; ctx.fillText('Filled Rect', 175, 125); // === 2. Only border (stroke) rectangle === ctx.strokeStyle = '#e74c3c'; // red ctx.lineWidth = 12; ctx.strokeRect(350, 50, 250, 150); ctx.fillStyle = '#2c3e50'; ctx.fillText('Stroke Only', 475, 125); // === 3. Both fill + stroke === ctx.fillStyle = '#2ecc71'; // green ctx.strokeStyle = '#27ae60'; ctx.lineWidth = 10; ctx.fillRect(50, 250, 250, 150); ctx.strokeRect(50, 250, 250, 150); ctx.fillStyle = 'white'; ctx.fillText('Fill + Stroke', 175, 325); // === 4. Rounded rectangle (modern roundRect) === ctx.beginPath(); ctx.roundRect(350, 250, 250, 150, 40); // x, y, w, h, corner radius ctx.fillStyle = '#9b59b6'; ctx.fill(); ctx.strokeStyle = '#8e44ad'; ctx.lineWidth = 8; ctx.stroke(); ctx.fillStyle = 'white'; ctx.fillText('Rounded Rect', 475, 325); </script> </body> </html> |
What you see:
- 4 different rectangles side by side
- Solid filled blue
- Red border only
- Green filled + border
- Purple rounded corners
3. All Important Rectangle Commands (With Copy-Paste Snippets)
A. fillRect() – Filled rectangle (most common)
JavaScript
|
0 1 2 3 4 5 6 7 |
ctx.fillStyle = 'rgba(52, 152, 219, 0.7)'; // blue semi-transparent ctx.fillRect(100, 100, 300, 180); |
B. strokeRect() – Border only
JavaScript
|
0 1 2 3 4 5 6 7 8 9 |
ctx.strokeStyle = '#e67e22'; ctx.lineWidth = 15; ctx.lineJoin = 'round'; ctx.strokeRect(450, 100, 200, 180); |
C. roundRect() – Rounded corners (modern & beautiful)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
ctx.beginPath(); ctx.roundRect(100, 300, 250, 120, 30); // last number = corner radius ctx.fillStyle = '#27ae60'; ctx.fill(); ctx.strokeStyle = '#219653'; ctx.lineWidth = 6; ctx.stroke(); |
D. rect() + fill() / stroke() – More flexible (can combine with other paths)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
ctx.beginPath(); ctx.rect(400, 300, 200, 100); // same as fillRect but part of path ctx.fillStyle = '#f39c12'; ctx.fill(); ctx.strokeStyle = '#d35400'; ctx.lineWidth = 8; ctx.stroke(); |
E. Clear rectangle (erase / cut hole)
JavaScript
|
0 1 2 3 4 5 6 |
ctx.clearRect(200, 200, 150, 100); // removes everything in that area |
4. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- fillRect() & strokeRect() are fastest — use them when you only need rectangles
- roundRect() is modern (Chrome/Edge/Firefox/Safari 2024+) — fallback to arc() for older browsers if needed
- Always set fillStyle / strokeStylebefore drawing — they don’t apply retroactively
- Common mistake #1: Draw rectangle but forget fill() or stroke() → invisible!
- Common mistake #2: Use CSS border on canvas → it’s outside the drawing surface (won’t be part of exported image)
- Pro tip: Use ctx.save() / ctx.restore() when changing styles
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 Rectangles fully now? Rectangles are the easiest shape and appear in almost every canvas project — master them and you’re ready for cards, buttons, charts, overlays, cropping, everything.
Tell me what you want next — we can build on this:
- Full modern card with gradient + rounded + shadow?
- Bar chart using only rectangles?
- Rounded rectangle button with hover effect?
- Animated growing/shrinking rectangle?
- Or 15-question Canvas rectangles quiz?
Just say — we keep going step by step together! 🚀
