Chapter 38: Canvas Shapes
1. What are “Canvas Shapes” actually?
Canvas Shapes means using JavaScript on the <canvas> element to draw basic geometric figures — rectangles, circles, ellipses, lines, polygons, curves, arcs, and custom paths — that form the building blocks of almost every canvas drawing.
In Canvas, there are no ready-made shape tags like in SVG (<circle>, <rect>, <path>). Instead, you use the 2D drawing context (ctx) to command the browser to draw each shape using methods like:
- fillRect(), strokeRect(), roundRect()
- arc()
- beginPath(), moveTo(), lineTo(), quadraticCurveTo(), bezierCurveTo(), closePath()
- stroke(), fill()
So Canvas Shapes = code instructions that tell the canvas “draw a rectangle here”, “draw a circle there”, “connect these points with lines”, etc.
2. Your First Canvas Shapes Example – All Basic Shapes in One File (Copy-Paste & Run)
Create canvas-shapes.html and paste this complete code:
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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Shapes – All Basics</title> <style> canvas { border: 4px solid #2c3e50; background: #f8f9fa; display: block; margin: 30px auto; } h1 { text-align: center; color: #34495e; } .container { max-width: 900px; margin: auto; padding: 20px; } </style> </head> <body> <div class="container"> <h1>Canvas Shapes – Rectangle, Circle, Line, Curve, Path</h1> <canvas id="shapesCanvas" width="800" height="500"></canvas> </div> <script> const canvas = document.getElementById('shapesCanvas'); const ctx = canvas.getContext('2d'); // Light background ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // === 1. Rectangle (filled + stroked) === ctx.fillStyle = '#3498db'; // blue fill ctx.fillRect(50, 50, 200, 120); ctx.strokeStyle = '#2980b9'; // darker blue border ctx.lineWidth = 8; ctx.strokeRect(50, 50, 200, 120); ctx.fillStyle = 'white'; ctx.font = '20px Arial'; ctx.fillText('Rectangle', 150, 110); // === 2. Rounded Rectangle (modern roundRect) === ctx.beginPath(); ctx.roundRect(300, 50, 200, 120, 30); // x, y, w, h, corner radius ctx.fillStyle = '#2ecc71'; ctx.fill(); ctx.strokeStyle = '#27ae60'; ctx.lineWidth = 6; ctx.stroke(); ctx.fillStyle = 'white'; ctx.fillText('Rounded Rect', 400, 110); // === 3. Circle (arc full 360°) === ctx.beginPath(); ctx.arc(150, 300, 80, 0, Math.PI * 2); // cx, cy, radius, start, end ctx.fillStyle = '#e74c3c'; ctx.fill(); ctx.strokeStyle = '#c0392b'; ctx.lineWidth = 10; ctx.stroke(); ctx.fillStyle = 'white'; ctx.fillText('Circle', 150, 300); // === 4. Simple Line (horizontal) === ctx.beginPath(); ctx.moveTo(300, 300); ctx.lineTo(700, 300); ctx.strokeStyle = '#f39c12'; ctx.lineWidth = 15; ctx.lineCap = 'round'; ctx.stroke(); ctx.fillStyle = '#2c3e50'; ctx.fillText('Line', 500, 280); // === 5. Connected Path (zigzag triangle) === ctx.beginPath(); ctx.moveTo(400, 400); ctx.lineTo(500, 250); ctx.lineTo(600, 400); ctx.closePath(); // connect back to start ctx.fillStyle = 'rgba(155, 89, 182, 0.7)'; // semi-transparent purple ctx.fill(); ctx.strokeStyle = '#9b59b6'; ctx.lineWidth = 8; ctx.lineJoin = 'round'; ctx.stroke(); ctx.fillStyle = 'white'; ctx.fillText('Path / Triangle', 500, 370); // === 6. Arc (half circle / pie slice) === ctx.beginPath(); ctx.arc(150, 450, 60, 0, Math.PI); // 0 to 180° = half circle ctx.lineTo(150, 450); // back to center ctx.fillStyle = '#f1c40f'; ctx.fill(); ctx.strokeStyle = '#d35400'; ctx.lineWidth = 6; ctx.stroke(); ctx.fillStyle = '#2c3e50'; ctx.fillText('Half Circle', 150, 520); </script> </body> </html> |
What you see:
- Rectangle (filled + stroked)
- Rounded rectangle
- Circle (filled + stroked)
- Straight line
- Zigzag closed path (triangle-like)
- Half-circle pie slice
4. All Important Shape-Drawing Commands (With Copy-Paste Snippets)
A. Rectangles
JavaScript
|
0 1 2 3 4 5 6 7 8 |
ctx.fillRect(x, y, width, height); // filled only ctx.strokeRect(x, y, width, height); // border only ctx.roundRect(x, y, width, height, radius); // rounded corners (modern) |
B. Circles & Arcs
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 |
ctx.beginPath(); ctx.arc(cx, cy, radius, startAngle, endAngle, counterclockwise = false); ctx.closePath(); // optional – connect back ctx.fill(); // fill inside ctx.stroke(); // draw outline |
C. Lines & Paths (the most flexible)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 |
ctx.beginPath(); ctx.moveTo(x, y); // jump to start (no line) ctx.lineTo(x, y); // draw straight line to here ctx.closePath(); // optional – back to start ctx.stroke(); // draw the lines |
D. Curves
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 |
// Quadratic (1 control point) ctx.quadraticCurveTo(cpx, cpy, x, y); // Cubic Bezier (2 control points – smoothest) ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); |
E. Ellipse (oval)
JavaScript
|
0 1 2 3 4 5 6 |
ctx.ellipse(cx, cy, radiusX, radiusY, rotation, startAngle, endAngle); |
5. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Always beginPath() before new shape — prevents connecting to previous drawing
- stroke() draws the border — fill() fills the inside
- Order matters: fill() first, then stroke() → stroke sits on top
- Common mistake #1: Draw shape but forget fill() or stroke() → invisible!
- Common mistake #2: Forget beginPath() → lines connect to previous shape
- 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 Shapes fully now? These are the building blocks of almost every canvas project — master them and you’re ready for animations, games, charts, image editors, anything.
Tell me what you want next — we can build on this:
- Full paint app (click to draw shapes)?
- Animated growing/shrinking shapes?
- Shape collision detection (game style)?
- Custom polygon / star generator?
- Or 15-question Canvas shapes quiz?
Just say — we keep going step by step together! 🚀
