This is a two part tutorial on how to draw a clock using JavaScript and HTML5 Canvas. In this particular tutorial we shall cover the math involved and in the next one we shall take that knowledge and use it to write the JavaScript code to render the clock in the browser. All homework is optional but doing it will help reinforce the concept.

NB: All our calculations will be

1. Relative to the 12 (because in general time is measured relative to the 12)
2. In radians. This is because most programming languages (JavaScript inclusive) measure angles in radians. If you need a little refresher
   1 degree = Π / 180 radians.
3. Negative angles mean clockwise direction.
4. I will not be simplifying the expressions because they are meant to be used to write JavaScript code so I will let the computer do that for me.

With that out of the way, let's jump in and start our calculations.

Hour hand

The angle of the hour hand h_Θ relative to the 12 at any time t is given by equation (i)
Take a step back to make sure you understand that equation. If you don't, then think of it this way. At any time t the position of the hour hand relative to the 12 is given by the hour offset (is it 1, 2, 3... o'clock ?) plus the minute offset (is it 10min , 20min, 30min ... past ?) and for every tick of the second hand, this position changes by a certain angle which I am calling delta s (δs).

h_Θ = hour offset + minute offset + δs -----(i)

The hour offset

In 12 hours the hour hand moves by 2Π radians
In 1 hour it moves by 2Π / 12 = Π / 6 radians

The minute offset

In 12 hrs the hour hand moves by 2Π radians
In (12 X 60) min it moves by 2Π / 60 = Π / 30 radians
In 1 min it moves by 2Π / (12 X 60) = Π / (6 X 60) radians

The second offset (δs)

In 12 hrs the hour hand moves by 2Π radians
In (12 X 60 X 60) sec the hour hand moves by 2Π radians
In 1 sec it moves by 2Π / (12 X 60 X 60) = Π / (6 X 60 X 60) radians

In general,

h_Θ = h X Π / 6 + m X Π / (6 X 60) + s X Π / (6 X 60 X60) radians

where h is the hour, m the minute and s the second

[Back to top]

Minute hand

Similarly, the angle of the minute hand m_Θ relative to the 12 at any time t is given by equation (ii)

m_Θ = minute offset + δs ------------- (ii)

The minute offset

In 60 min the minute hand moves by 2Π radians
In 1 min it moves by 2Π / 60 = Π / 30 radians

The second offset

In 60 min the min hand moves by 2Π radians
In (60 X 60) sec the min hand moves by 2Π radians
In 1 sec it moves by 2Π / (60 X 60) = Π / (30 X 60) radians

In general,

m_Θ = m X Π / 30 + s X Π / (30 X 60)

where m is the minute and s the second

 

[Back to top]

Second hand

Similarly, the angle of the second hand s_Θ relative to the 12 at any time t is given by equation (iii)

s_Θ = δs ------------ (iii)

δs

In 60 sec the second hand moves by 2Π radians
In 1 sec it moves by 2Π / 60 = Π / 30 radians

In general,

s_Θ = s X Π / 30

where s is the second

 

Homework

General

1. Calculate the angle of the hour,minute and second hands relative to the 12 at 6:26:30 (Ans: Hour hand: 773 π / 720 radians Minute hand: 53 π / 60 radians Second hand: π radians)
2. Calculate the angle between the hour and minute hand at 8:45 (Ans: - 37 π / 240 radians)

Extra Credit

1. The hour hand and the minute hand are superposed once every hour.At what time are they superposed in the third hour ? (Ans: 3:16:22)

See also
Clock Hand Angle Math Explained Using JavaScript and HTML5 Part II