Chapter 56: Clock Face

Clock Face 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 a clock face is built — not just copy a finished clock, but know exactly why every line, circle, number, and tick is placed where it is.

Today we’re going to explain and build only the static clock face — the background part that doesn’t move. (The moving hands come in a separate lesson so we don’t mix everything at once.)

What is a Clock Face? (The background / dial of an analog clock — everything except the moving hands)

The clock face is the fixed circular background that shows:

• The outer ring / bezel
• The main face (usually with a subtle gradient or color)
• 12 hour markers (longer/thicker lines or bigger numbers)
• 60 minute markers (shorter/thinner lines)
• Usually numbers at 12, 3, 6, 9 (sometimes all 12)
• Sometimes small decorations (dots, Roman numerals, brand logo, etc.)

In Canvas, we draw the face only once at the beginning — we never redraw it every second. We only redraw the hands (and maybe a small center dot) every second.

Mental Model – Think of it like a real wall clock

1. Big outer metal/plastic ring (decorative border)
2. Slightly smaller inner circle (the actual dial)
3. 12 long lines/marks at every hour
4. 60 small lines/marks at every minute (skip the hour ones)
5. Numbers placed along the inner edge
6. Everything is perfectly symmetric around the center

Step-by-step: How we draw a nice modern clock face in Canvas

Here’s a complete, self-contained example that draws only the face — no hands yet.

What you should see & remember forever:

• Thick dark outer ring → gives premium/watch-like feel
• Subtle radial gradient on face → adds depth (lighter center, darker edge)
• 12 long thick hour ticks
• 48 short thin minute ticks (skipping every 5th)
• Big numbers only at 12, 3, 6, 9 → clean & modern
• Everything perfectly centered using cx, cy helpers
• No hands yet — that’s next lesson

Key Techniques Used Here

• arc() for perfect circles
• save() / restore()not needed here (no transformations yet)
• Math.cos() / Math.sin() + angle math for placing ticks & numbers
• lineCap = ’round’ for smooth tick ends
• textBaseline = ‘middle’ for perfect vertical centering of numbers

Your mini homework (try tonight – 10–20 minutes)

1. Make the hour numbers bigger & bolder (only 12, 3, 6, 9)
2. Add small dots instead of lines for minute ticks
3. Change the face gradient to a lighter silver/gray theme
4. (Bonus) Add Roman numerals (XII, III, VI, IX) instead of Arabic

Paste your modified code here if you want feedback — I’ll review it like we’re pair-programming together 😄

Any part confusing?

• Why we use radius – 35 for inner tick position?
• Angle math (why -Math.PI/2)?
• Why we draw face only once?
• How to place numbers exactly on the circle?
• Something else?

Tell me — we’ll zoom in until the clock face feels perfect to you.

You just built the static foundation of a real analog clock — the moving hands are next, and it’s going to look amazing! 🚀