Draw Digital Clock

As accurate as your operating system’s clock. JavaScript’s Date object reads from the OS via the browser. Modern OSes sync via NTP (Network Time Protocol) – typically within tens of milliseconds of true UTC. If your OS clock is wrong, this tool will show the wrong time. Verify in Settings → Date & Time. The tool does NOT call a network time server – it would defeat the “offline” promise.

Browsers throttle requestAnimationFrame when a tab is backgrounded – usually to one frame per second or fully paused (Chrome aggressively, Firefox less so). When you switch back, rAF resumes and the display updates from the CURRENT new Date(), so you’ll see the correct time immediately – it just appeared frozen because no frames were being drawn during the background period.

Three uses. (1) Timing demos: show a stopwatch-style display in screencast tutorials. (2) Catching the precise moment something happened (then screenshot or copy). (3) Verifying clock smoothness: in a live screencast, watching the .000 digit roll over at 1000 Hz confirms your encoder is capturing all the frames. Note: human eyes can’t really track 1000 Hz digit changes – it’ll look like a blurred fast-counting number.

12-hour: midnight = 12:00 AM, noon = 12:00 PM, 1 PM = 1:00 PM, 11 PM = 11:00 PM. Common in the US, UK, Canada, Australia. 24-hour (“military time”): midnight = 00:00, noon = 12:00, 1 PM = 13:00, 11 PM = 23:00. Common everywhere else, plus aviation, military, computing. Conversion: PM hours add 12 (1 PM → 13:00), AM hours stay the same except midnight (12 AM → 00:00).

new Date().getHours() returns LOCAL time, which the OS handles for you including DST jumps. In US DST, on the second Sunday of March at 2:00 AM local, the clock jumps to 3:00 AM – so the clock will show 1:59:59 then 3:00:00 (one second later). On the first Sunday of November at 2:00 AM, it jumps back to 1:00 AM – so the clock will show 1:59:59 then 1:00:00 (and that hour gets relived). The tool inherits this automatically – no special code needed.

Digital clock digits need EQUAL widths so the display doesn’t shift left-right as digits change (e.g. 1 and 0 are different widths in proportional fonts). The CSS uses ui-monospace first (matches the OS’s native monospace – SF Mono on Mac, Cascadia/Consolas on Windows, Liberation/DejaVu on Linux) with fallbacks to specific fonts. All chosen for crisp digit rendering at the large size.

Yes. The download is a fresh Canvas paint with: theme bg color, theme text color, theme glow as ctx.shadowColor + ctx.shadowBlur: 12, and 96 px monospace text. So it visually matches the on-screen display. Resolution: 720×200 logical pixels × devicePixelRatio (1440×400 on Retina). Use for thumbnails, slide decks, or social media headers.

The tool is a standalone HTML page – embed via <iframe>. For a custom widget, lift DrawDigitalClockLogic (pure functions, no DOM access) and call applyFormat(new Date(), 'hms', false) in your own rAF loop. About 1.5 KB of pure logic. The CSS clock styling is also liftable (~20 lines for the digital-frame display).

Yes. 100% client-side. No network calls after the initial page load. Reads only your OS clock. Verify via your browser’s Network tab – only the initial HTML/CSS/JS load happens, no XHR/fetch.