First let’s create a basic HTML5 page that will contain the canvas tag and other markup:
This file consists entirely of the method setupAnalogClock(). I will now run through the file and how it works:
- setupAnalogClock() takes 2 parameters; the first is the canvas element, the second is the width (diameter) of the clock.
- Once called we begin by get the canvas context and getting the centre coordinates of the canvas.
- After doing that I defined a method called tick() that will be run once a second and will update and process all the drawing of the clock.
- Within tick() I defined two other functions called drawStatic(), and drawHand().
- drawStatic() simply draws all the static parts of the clock, this includes the face, the centre point and the lines representing numbers around the face of the clock.
- The lines representing numbers are drawn in their own function called drawNumbers() which counts backwards from 12 and draws each line in place.
- drawHand() is a method that takes 2 parameters; the first being the length of the hand (this should be between 0 and the radius of the clock) and the angle at which to draw the hand.
- The colour and line width of each hand is set before calling drawHand() in the tick() function.
- At the end of setupAnalogClock() we call tick() once (to draw onto the screen) and then use setInterval() to call tick() once a second while we stay on this page.
The results look like this (for a live version click here):
The canvas is slightly larger than the clock face to accommodate the line width of the face.
How the Hands Work
The hands (and the hour markings) work by using transforms supported by HTML5’s canvas tag and some basic mathematics.
Firstly I worked out a few equations based upon some facts:
- There are 360 degrees in a circle (which in radians is 2 * pi).
- There are 12 hours on a clock face.
- There are 60 minutes in an hour.
- There are 60 seconds in a minute.
From these you can work out the degrees a hand should rotate based upon what it is representing:
- 360 / 12 = 30. Which is the number of degrees the hour hand should rotate per hour. e.g. at 9 o’clock the hour hand should of rotated 9 * 30 (270) degrees.
- 360 / 60 = 6. Which is the number of degrees the minute hand should rotate per minute AND the number of degrees the second hand should rotate per second.
Of course the rotate methods for the canvas tag use radians instead of degrees (like most programming languages and libraries) so we then need to translate these degrees into radians by simply multiplying them by pi / 180.
So using these the method for drawing the hands becomes simple;
- First we translate to the centre of the watch.
- Then we rotate by the desired angle. (taking into account that the canvas origin is at the top left).
- Then we draw the line from where we are up to the desired length.
Hopefully this will help others to create a little HTML5 analog clock. Feel free to use the code, just don’t try to claim it as your own! I wrote this quickly while trying to make a nice replacement for the analog clock on iGoogle (since iGoogle will be disappearing soon) using HTML5, I will next try to create one that makes use of CSS3 transforms instead of the canvas tag.
You may have noticed the commented out code for numbering, I didn’t have it active because I couldn’t get them looking satisfactory and I think it looks better without them anyway.