Chapter 41: Canvas Circles
Canvas Circles properly, slowly, and in great detail — exactly like a patient teacher sitting next to you explaining it for the first time.
We’re going to build every concept with tiny, complete, runnable examples. No skipping steps. No magic. Just clear English, visual thinking, common beginner traps, and repeated patterns until circles feel completely natural and easy to control.
Canvas Circles – From Zero to Confident
1. The single most important sentence about circles in Canvas
A circle in Canvas is not a permanent object you can later move or resize like in SVG. It is a curved path (specifically a full 360° arc) that you describe once, then tell the painter to:
- fill() → paint the inside pixels
- stroke() → paint the outline pixels
- or both
After you call fill() or stroke(), those pixels are just pixels — there is no “circle object” anymore. If you want to move the circle, grow it, change its color, or make it pulse → you have to erase the old circle (usually with clearRect) and draw a new circle at the new position/size/color.
2. The only command you need for circles: arc()
Almost every circle uses this one method:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
ctx.arc( centerX, // x-coordinate of the center centerY, // y-coordinate of the center radius, // distance from center to edge startAngle, // starting angle in radians endAngle, // ending angle in radians counterclockwise // true = anti-clockwise, false = clockwise (almost always false) ); |
To draw a full circle — the most common case — you always use:
|
0 1 2 3 4 5 6 |
ctx.arc(cx, cy, r, 0, Math.PI * 2, false); |
3. Radians quick-reference table (memorize these!)
Canvas uses radians, not degrees. Here are the ones you will use 95% of the time:
| Angle (degrees) | Radians value | Position / Direction |
|---|---|---|
| 0° | 0 | right (3 o’clock) |
| 90° | Math.PI / 2 | down (6 o’clock) |
| 180° | Math.PI | left (9 o’clock) |
| 270° | Math.PI * 1.5 | up (12 o’clock) |
| 360° | Math.PI * 2 | full circle — back to start |
4. Minimal complete circle example (copy → run immediately)
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas – First Circle</title> <style> canvas { border: 1px solid #ccc; background: #f8f9fa; display: block; margin: 40px auto; } </style> </head> <body> <canvas id="c" width="600" height="400"></canvas> <script> const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); // Center helpers (very good habit) const cx = canvas.width / 2; // 300 const cy = canvas.height / 2; // 200 // Step 1: Start a fresh path ctx.beginPath(); // Step 2: Describe a full circle ctx.arc(cx, cy, 90, 0, Math.PI * 2); // Step 3: Fill the inside ctx.fillStyle = '#4CAF50'; // green fill ctx.fill(); // Step 4: Add outline ctx.strokeStyle = '#2E7D32'; // darker green border ctx.lineWidth = 14; ctx.stroke(); // Label ctx.font = 'bold 28px Arial'; ctx.fillStyle = '#333'; ctx.textAlign = 'center'; ctx.fillText('My First Circle', cx, cy + 140); </script> </body> </html> |
What you should see & remember forever:
- Circle perfectly centered using canvas.width/2 and canvas.height/2
- beginPath() → starts fresh (very important!)
- arc(…, 0, Math.PI*2) → full 360° circle
- fill() → paints inside pixels
- stroke() → paints outline pixels (drawn on top of fill)
5. Example 2 – Different circle styles (copy-paste & play)
|
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 |
<canvas id="c2" width="900" height="400"></canvas> <script> const canvas = document.getElementById('c2'); const ctx = canvas.getContext('2d'); // Helper function to draw labeled circle function drawCircle(x, y, r, fillColor, strokeColor, label, lineWidth = 8, dash = []) { ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); if (fillColor) { ctx.fillStyle = fillColor; ctx.fill(); } if (strokeColor) { ctx.strokeStyle = strokeColor; ctx.lineWidth = lineWidth; if (dash.length > 0) ctx.setLineDash(dash); ctx.lineCap = 'round'; ctx.stroke(); ctx.setLineDash([]); // reset } ctx.fillStyle = '#333'; ctx.font = '18px Arial'; ctx.textAlign = 'center'; ctx.fillText(label, x, y + r + 30); } // 1. Filled only drawCircle(150, 120, 70, '#4CAF50', null, 'Filled only'); // 2. Outlined only + thick drawCircle(400, 120, 70, null, '#F44336', 'Outlined only', 16); // 3. Filled + dashed outline drawCircle(650, 120, 70, '#2196F3', '#0D47A1', 'Filled + dashed', 10, [12, 6]); // 4. Thick ring (fill + big stroke) ctx.beginPath(); ctx.arc(150, 300, 90, 0, Math.PI*2); ctx.fillStyle = '#673AB7'; ctx.fill(); ctx.strokeStyle = '#512DA8'; ctx.lineWidth = 30; ctx.stroke(); ctx.fillText('Thick ring', 150, 420); // 5. Dotted circle drawCircle(400, 300, 80, null, '#009688', 'Dotted outline', 12, [4, 12]); </script> |
Key lessons from this example:
- Fill only → just fill()
- Outline only → just stroke()
- Both → fill() first → stroke() second (stroke sits on top)
- Thick ring → large lineWidth on stroke
- Dashed/dotted → setLineDash([dash, gap]) + lineCap = ’round’ for nice dots
6. Your three tiny practice tasks (10–15 min each)
Task 1 – Smiley face Yellow filled circle (face) Two small black filled circles (eyes) One thick red arc (smiling mouth) — use partial arc with angles Math.PI/4 to Math.PI*3/4
Task 2 – Traffic light Three stacked circles (red top, yellow middle, green bottom) Each with thick black outline Use same center x, different y positions
Task 3 – Olympic rings style Draw five interlocking circles (try blue, yellow, black, green, red) Tip: draw them one by one, adjust positions so they overlap nicely
Paste any of them here when you finish — I’ll review it like we’re pair-programming together.
Which part still feels a little slippery?
- Why beginPath() before every circle?
- Difference between fill() and stroke() order?
- How to make thick rings / outlines look nice?
- Angles in radians (0 to Math.PI*2)?
- Positioning multiple circles accurately?
- Something else?
Tell me honestly — we’ll stay on circles until you feel super confident drawing and combining them with other shapes.
You’re doing really well — circles are the gateway to almost every beautiful and useful Canvas graphic!
