Chapter 57: Clock Numbers
Clock Numbers in the most detailed, clear, and patient way possible.
Imagine we’re sitting together at a desk, and I’m your favorite teacher who wants you to really understand how the numbers on a clock face are placed, styled, and drawn — not just copy-paste a finished clock.
Today we focus only on the numbers (12, 1, 2, …, 12 or just 12, 3, 6, 9) — the fixed part of the clock face that never moves.
We will explain:
- Why numbers are placed at specific angles
- How to calculate exact positions using trigonometry
- Different styles people use (Arabic vs Roman, all 12 vs only quarters)
- How to make them look good (size, font, color, alignment)
- Full working code examples you can run immediately
Clock Numbers – Complete Explanation & Build-Along
1. The single most important mental model
Clock numbers are placed on an invisible circle around the center.
- The clock is a circle → 360°
- There are 12 hours → each hour is 30° apart (360 ÷ 12 = 30)
- In Canvas (and almost every graphics system):
- 0° is at the right (3 o’clock position)
- Angles increase clockwise
- But 12 o’clock is at the top → so we subtract 90° (Math.PI/2) to shift 0° to the top
Key formula you will use forever:
JavaScript
|
0 1 2 3 4 5 6 7 |
const angle = (hour * Math.PI / 6) - Math.PI / 2; // hour = 0..11 // or for minute ticks: (minute * Math.PI / 30) - Math.PI / 2 |
Then position:
JavaScript
|
0 1 2 3 4 5 6 7 |
const x = centerX + Math.cos(angle) * distanceFromCenter; const y = centerY + Math.sin(angle) * distanceFromCenter; |
2. Two common styles of clock numbers
| Style | Numbers shown | Typical look & feel | When to use it |
|---|---|---|---|
| Full 12 numbers | 1 through 12 | Traditional, classic, easy to read | Classic wall clocks, teaching clocks |
| Quarter numbers only | 12, 3, 6, 9 only | Modern, minimalist, clean | Modern watches, dashboard clocks, UI design |
Most digital/minimal designs use only 12, 3, 6, 9 — it looks cleaner and less crowded.
3. Minimal complete example – Full 12 numbers
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 Clock – Numbers Only</title> <style> body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: #0d1117; } canvas { border: 4px solid #30363d; border-radius: 50%; box-shadow: 0 0 60px rgba(0,0,0,0.9); } </style> </head> <body> <canvas id="clock" width="500" height="500"></canvas> <script> const canvas = document.getElementById('clock'); const ctx = canvas.getContext('2d'); const cx = canvas.width / 2; const cy = canvas.height / 2; const radius = canvas.width / 2 - 60; // space for numbers // Draw subtle face background ctx.beginPath(); ctx.arc(cx, cy, radius + 50, 0, Math.PI * 2); ctx.fillStyle = '#161b22'; ctx.fill(); // Draw numbers 1 to 12 ctx.fillStyle = '#c9d1d9'; // light gray-white ctx.font = 'bold 48px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; for (let hour = 1; hour <= 12; hour++) { const angle = ((hour % 12) * Math.PI / 6) - Math.PI / 2; // 0° at top const x = cx + Math.cos(angle) * radius; const y = cy + Math.sin(angle) * radius; ctx.fillText(hour, x, y); } // Center dot (for future hands) ctx.beginPath(); ctx.arc(cx, cy, 12, 0, Math.PI*2); ctx.fillStyle = '#c9d1d9'; ctx.fill(); // Optional title ctx.fillStyle = '#8b949e'; ctx.font = 'bold 24px Arial'; ctx.fillText('Full 12 Numbers', cx, cy + radius + 60); </script> </body> </html> |
What you should see & remember forever:
- Numbers 1–12 placed exactly on an invisible circle
- Angle formula: (hour % 12) * 30° – 90° (in radians)
- – Math.PI / 2 shifts 0° from right → top (12 o’clock)
- textAlign = ‘center’ + textBaseline = ‘middle’ → numbers perfectly centered on their positions
4. Example 2 – Modern style: Only 12, 3, 6, 9
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 |
<!-- Same HTML structure as above --> <script> // ... same canvas & ctx setup ... const cx = canvas.width / 2; const cy = canvas.height / 2; const radius = canvas.width / 2 - 70; // Face background ctx.beginPath(); ctx.arc(cx, cy, radius + 60, 0, Math.PI * 2); ctx.fillStyle = '#161b22'; ctx.fill(); // Only 12, 3, 6, 9 ctx.fillStyle = '#c9d1d9'; ctx.font = 'bold 64px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; const positions = [ { num: 12, angle: -Math.PI / 2 }, { num: 3, angle: 0 }, { num: 6, angle: Math.PI / 2 }, { num: 9, angle: Math.PI } ]; positions.forEach(({ num, angle }) => { const x = cx + Math.cos(angle) * radius; const y = cy + Math.sin(angle) * radius; ctx.fillText(num, x, y); }); // Center dot ctx.beginPath(); ctx.arc(cx, cy, 14, 0, Math.PI*2); ctx.fillStyle = '#c9d1d9'; ctx.fill(); ctx.fillStyle = '#8b949e'; ctx.font = 'bold 24px Arial'; ctx.fillText('Modern Quarter Numbers', cx, cy + radius + 80); </script> |
Key differences from full 12:
- Fewer numbers → cleaner, more modern/minimal look
- Bigger font size → easier to read
- Same angle math — just fewer positions
5. Bonus: Roman numerals version (XII, III, VI, IX)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
const roman = ['XII', 'III', 'VI', 'IX']; roman.forEach((num, i) => { const angle = (i * Math.PI / 2) - Math.PI / 2; const x = cx + Math.cos(angle) * radius; const y = cy + Math.sin(angle) * radius; ctx.fillText(num, x, y); }); |
6. Your mini homework (try tonight – 15–20 minutes)
- Draw a clock face with only 12, 3, 6, 9 in large bold font
- Add small dots instead of minute ticks (every 6°)
- Change colors: light face + dark numbers (or vice versa)
- (Bonus) Try Roman numerals instead of Arabic
Paste your version here when you’re done — I’ll review it like we’re sitting together improving it.
Any part confusing?
- Why we subtract Math.PI / 2 (90°) from the angle?
- How to place numbers exactly on the circle (not inside or outside)?
- Difference between full 12 vs quarter numbers?
- How to make numbers bigger/bolder without looking crowded?
- Something else?
Tell me — we’ll zoom in until the clock numbers feel perfect to you.
You just mastered one of the most iconic parts of any analog clock — the face is ready for hands next lesson! 🚀
