JavaScript: create an analogue clock with canvas

There's an interesting example buried in the MDM HTML5 pages, where we can create an analogue clock with JavaScript and .

There's not much to say about it. What is interesting for us, is the way the clock is actually drawn.

The blue circle, hours and minutes marks are created using JavaScript, and the same logic is used to draw the hours, minutes and seconds arms.

All the static and moving parts of the clock are inserted into a tag using getElementById. If the browser is not recognizing the HTML5 tag, it will only show a warning.

You can get the code from the MDM page, or copy it from here:

The above goes into the head of your page.
The tag should be changed to:

And finally, just insert the canvas where we want to show the clock:

The canvas is not supported by your browser

And that's all.