Chapter 41: Canvas Circles
1. What are “Canvas Circles” actually?
Canvas Circles means using JavaScript on the <canvas> element to draw perfect circular shapes (full circles, half-circles, pie slices, rings, arcs, dotted circles, glowing orbs, clocks, buttons, loaders, eyes in drawings, etc.).
In Canvas, there is no <circle> tag like in SVG. Instead, you use the arc() method to draw circles (and parts of circles).
The arc() method is extremely powerful — it can draw:
- Full circles (360°)
- Half-circles / semi-circles
- Pie slices / sectors
- Thin rings / donuts
- Curved arcs (not full circle)
- Smoothed curves when combined with other path commands
One golden rule everyone must remember from day one:
- arc() always works inside a path → you must use beginPath(), then arc(), then fill() or stroke() (or both)
2. Syntax of arc() – The Heart of Canvas Circles
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 |
ctx.beginPath(); ctx.arc(centerX, centerY, radius, startAngle, endAngle, counterclockwise = false); ctx.closePath(); // optional – only needed for filling ctx.fill(); // fill inside ctx.stroke(); // draw outline |
Parameters explained (very slowly):
- centerX → horizontal center of the circle (from left edge of canvas)
- centerY → vertical center (from top edge — remember Y increases down)
- radius → distance from center to edge (in pixels)
- startAngle → starting angle in radians (0 = right side, Math.PI/2 = bottom, Math.PI = left, 3*Math.PI/2 = top)
- endAngle → ending angle in radians
- counterclockwise → false = clockwise (default), true = counterclockwise (rarely used)
Important angles everyone must memorize:
- 0 radians = right side (3 o’clock)
- Math.PI / 2 = bottom (6 o’clock)
- Math.PI = left (9 o’clock)
- 3 * Math.PI / 2 = top (12 o’clock)
- Math.PI * 2 = full circle (back to start)
3. Your First Canvas Circle – Hello World Style (Copy-Paste & Run)
Create canvas-circle-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 73 74 75 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Circles – First Example</title> <style> canvas { border: 4px solid #2c3e50; background: #ecf0f1; display: block; margin: 30px auto; } h1 { text-align: center; color: #34495e; } </style> </head> <body> <h1>Canvas Circles – Let's Draw Circles!</h1> <canvas id="circleCanvas" width="700" height="500"></canvas> <script> const canvas = document.getElementById('circleCanvas'); const ctx = canvas.getContext('2d'); // Light background ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // === 1. Simple filled yellow circle === ctx.beginPath(); ctx.arc(200, 150, 100, 0, Math.PI * 2); // center 200,150 radius 100 full circle ctx.fillStyle = '#f1c40f'; // yellow ctx.fill(); ctx.strokeStyle = '#d35400'; // orange border ctx.lineWidth = 12; ctx.stroke(); ctx.fillStyle = '#2c3e50'; ctx.font = '24px Arial'; ctx.textAlign = 'center'; ctx.fillText('Full Circle', 200, 150); // === 2. Half-circle (pie slice style) === ctx.beginPath(); ctx.arc(500, 150, 100, 0, Math.PI); // 0 to 180° = right to left (bottom half) ctx.lineTo(500, 150); // back to center → closes the slice ctx.fillStyle = '#e74c3c'; // red ctx.fill(); ctx.strokeStyle = '#c0392b'; ctx.lineWidth = 8; ctx.stroke(); ctx.fillStyle = 'white'; ctx.fillText('Half Circle', 500, 150); // === 3. Thin ring / donut (stroke only) === ctx.beginPath(); ctx.arc(350, 350, 120, 0, Math.PI * 2); ctx.strokeStyle = '#9b59b6'; ctx.lineWidth = 30; // thick line = ring effect ctx.stroke(); ctx.fillStyle = '#2c3e50'; ctx.fillText('Ring / Donut', 350, 350); </script> </body> </html> |
What you see:
- Big yellow filled circle with orange border
- Red half-circle / pie slice
- Thick purple ring (donut style)
4. All Important Circle / Arc Commands & Tricks (With Copy-Paste)
A. Full Circle (most common)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
ctx.beginPath(); ctx.arc(300, 200, 80, 0, Math.PI * 2); ctx.fillStyle = '#27ae60'; ctx.fill(); ctx.strokeStyle = '#219653'; ctx.lineWidth = 10; ctx.stroke(); |
B. Pie Slice / Sector (0 to 90° example)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 |
ctx.beginPath(); ctx.arc(300, 200, 100, 0, Math.PI / 2); // 0° to 90° = quarter circle ctx.lineTo(300, 200); // back to center ctx.fillStyle = '#f39c12'; ctx.fill(); ctx.stroke(); |
C. Ring / Donut (stroke only – no fill)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 |
ctx.beginPath(); ctx.arc(300, 200, 90, 0, Math.PI * 2); ctx.strokeStyle = '#8e44ad'; ctx.lineWidth = 40; // thick stroke = ring thickness ctx.stroke(); |
D. Dashed Circle Outline
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
ctx.beginPath(); ctx.arc(300, 200, 70, 0, Math.PI * 2); ctx.setLineDash([10, 5]); // dash 10px, gap 5px ctx.strokeStyle = '#e67e22'; ctx.lineWidth = 8; ctx.stroke(); ctx.setLineDash([]); // reset to solid |
E. Circle with Shadow (very common in UI)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; ctx.shadowBlur = 15; ctx.shadowOffsetX = 8; ctx.shadowOffsetY = 8; ctx.beginPath(); ctx.arc(300, 200, 80, 0, Math.PI * 2); ctx.fillStyle = '#3498db'; ctx.fill(); ctx.shadowColor = 'transparent'; // reset shadow |
5. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Always beginPath() before arc — prevents connecting to previous drawing
- Angles are in radians — full circle = Math.PI * 2, half = Math.PI, quarter = Math.PI / 2
- To make a perfect circle → endAngle must be Math.PI * 2 (or 0 to close naturally)
- Common mistake #1: Forget fill() or stroke() after arc → invisible circle!
- Common mistake #2: Wrong center (cx, cy) → circle appears in wrong place
- Common mistake #3: No beginPath() → arc connects to previous line/path
- Pro tip: Use ctx.save() / ctx.restore() when changing shadow / style
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 |
ctx.save(); ctx.shadowColor = 'black'; ctx.shadowBlur = 20; // draw glowing circle ctx.restore(); |
Understood Canvas Circles fully now? Circles (via arc()) are one of the most used shapes in Canvas — loaders, buttons, avatars, clocks, eyes, progress rings, glowing effects… almost everything.
Tell me what you want next — we can build on this:
- Full animated spinning loader (circle + arc)?
- Progress circle / circular loading bar?
- Mouse-following circle trail?
- Circle collision / bouncing balls?
- Or 15-question Canvas circles quiz?
Just say — we keep going step by step together! 🚀
