HTML5 Canvas Clock

Tick, tock…

This idea came from Wes Bos’ JavaScript30 course. I haven’t looked at any of the tutorial materials but when I saw this idea it got me thinking about how to approach it.

Here’s my attempt:

See the Pen Clock by Albert Kawmi (@albertkawmi) on CodePen.

The aliasing on this kind of canvas animation is pretty bad on some screens. It might be possible to get it smoother with another technique like CSS animations.

Also, I’m sure the maths could be expressed more eloquently! I found that part surprisingly tricky.

I had fun with this one and might try copying a few more of Wes Bos’ examples. 🤓

Written on December 7, 2017