How to Make an Analogue Clock with the HTML5 Canvas and Javascript
Making it tick

Previously we have learned how to draw a clock, and that's what we set out to do originally. So, job done right?

Not quite.

Real clocks tick and keep the time.

This where wrapping the logic to draw the clock within a function really pays off because we can simply use setInterval to update the clock every second like this:

setInterval(paintClock, 1000);

Easy peasy.

Drawing a clock does use up computing resources remember, so it may be worth having a think about how you want to implement this. If you don't use a second hand for example, you probably don't need to update every second. In my Chrome extension I make use of Chrome APIs to "lazy load" my clock so that it only updates when it needs to and doesn't get in the way of more important tasks.

I'm being deliberately light on details here because the way that you implement your clock is entirely up to you.

On the next page I have included some references to sites that provide some interesting further reading plus some ideas for further improvements and enhancements to the clock. If you have any questions or comments, just let me know.