Draw Analog Clock

The canvas has TWO resolutions: a CSS resolution (what you see, 400 × 400 here) and a backing-store resolution (the actual pixel buffer). On a Retina display, window.devicePixelRatio is 2 (or 3 on some phones). We set the backing store to 800 × 800 (= 400 × DPR), then scale the drawing transform by DPR. Result: 4× the pixel count for sharp anti-aliased lines. Without this, a 400×400 backing store gets upsampled to 800 physical pixels by the browser, causing blurry rendering.

Tick (disabled sweep): second hand moves in integer-second jumps – the classic step-step-step motion of a cheap quartz watch. The hand sits exactly between two tick marks during each second. Sweep (enabled): second hand moves continuously, computed from getMilliseconds() as a sub-second fraction. Looks like a high-end mechanical watch or a Rolex. Sweep runs at requestAnimationFrame rate – typically 60 FPS, but adaptive (drops to 30 if your tab is busy, freezes if your tab is backgrounded). Tick uses the same rAF loop but quantises to integer seconds.

No, custom mode is a single static frame. We cancel the rAF loop when you apply custom time. Changing the theme or numeral style triggers a redraw of the same custom moment. Sweep mode is also disabled in custom (since there’s no continuously updating millisecond stream – you set a specific moment). To see custom time “running,” apply your custom time then mentally count from there – or use a separate countdown tool.

Because 23 mod 12 = 11. The hour hand only knows positions 0-11 (12 is just position 0). 23:45 is “45 minutes past 11,” which is 75% of the way from 11 to 12 = very close to the 12 position. Not a bug – it’s how analog clocks work.

800 × 800 PNG (assuming DPR = 2 – would be 400 × 400 on a non-Retina display, 1200 × 1200 on a 3× Retina). The file captures the current frame including theme, numeral style, and exact second-hand position. PNG is lossless – fine for the small palette (~6 distinct colors). Filename pattern: analog-clock-<timestamp>.png.

Traditional analog clocks often use “IIII” for 4 instead of the subtractive “IV.” There’s no single agreed reason – proposed explanations include symmetry with “VIII” opposite, easier mold-casting, avoiding the IV symbol of Jupiter on Roman religious objects, or just clockmaker tradition. Both are mathematically correct Roman numerals; modern usage favors “IV” everywhere else. We use “IV” for consistency with standard Roman conventions.

Minimal. requestAnimationFrame auto-pauses when the tab is backgrounded – so on your phone, switching to another app freezes the clock until you return. Sweep at 60 FPS is one drawing pass per frame (clear + face + 60 ticks + 12 numerals + 3 hands + center = ~80 canvas operations). On modern devices that’s microseconds of CPU.

The tool is a standalone HTML page – embed via <iframe>. For a standalone canvas widget, you’d need to extract the JS and call DrawAnalogClockLogic.calculateAngles() + the drawing functions yourself. The logic module is pure (no document.*) so it’s reusable as-is in Node or other frameworks.

Yes. 100% client-side. No fetch/XHR. No telemetry. The clock reads your local time from JavaScript’s Date object – which uses your operating system’s clock and timezone. Nothing leaves your device.