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

On the previous pages we have built up a function which will draw a clock however we want it drawn. This page puts it all together in a real live demonstrator. Change the values to see just how customisable our clock can be or click the buttons to get started!

Clock radius (px):

Border Width (%):

Hour Hand length (%):

Hour hand width (%):

Hour hand overhang (%):

Minute hand length (%):

Minute Hand width (%):

Minute hand overhang (%):

Second hand length (%) (0 for none):

Second hand width (%):

Second hand overhang (%):

Ticks number (0 for none):

Tick length (%):

Tick gap (%):

Tick width (%):


Number size (%) (0 for none):

The very last thing left to do is make it tick. We'll do that in our final section.