22 thoughts on “Learning Javascript – 11. HTML5 Canvas Clock”

  1. Loved the tut. If anyone wants to make the hour in 12 hour increments instead of 24 hours, ctx.arc(250, 250, 200, degToRad(270), degToRad((hours * 30) – 90));

  2. Greatest tutorial in Universe!
    I used to animate div boxes not Canvas, but it did not work at times, suddenly stopped, so watching your video makes me want to learn more about Canvas. Thanks

  3. Absolutely the most informative lesson on such detail.
    All my professional programming was is assy & C. Now it's this.
    Is there any place to get this code without trying to copy it off of the YouTube video?

    Please advise

  4. This tutorial was fantastic and I watched it several times. The only issue is your measurement for the hour. You're only using 15 degrees for the movement of the hour basing the clock on a 24 hour time period. Since the standard clock has 12 points on it, I think you would want to use 30 degrees for each hour. For example, with only 15 degrees per hour, Noon would put you at the 6 o'clock position. It took me a while to figure out why my hours were showing up wrong. Hopefully this is helpful for someone.

  5. Good video

    But on it end on this video comes is date from today and if I the fillstyle do it then everything becomes blue
    How can this ?

  6. Something is wrong. The renderTime will only fire once which will turn the entire canvas blue. Something may have changed that is throwing this error.

  7. If someone have problem with color. Just add "#" to it 🙂 For example : '#28d1fa'. And it will work.
    When you have problem with bold font change it to 'bold 25px Arial. (25px Arial Bold – do not work for me )

    Thanks for videos 😉

Leave a Reply