< Pete Goodman Web developer >

Labs - Playing with Canvas - Pie Timer

Friday 12th September 2008, 17:07

The html canvas element offers an enormous potential for scripting graphics.

A while ago I put together a small experiment to test the (very!) basic animation potential of canvas. I wanted to see whether it would be possible to create a circular timer, to count down X number of seconds, and trigger a function call when complete.

The javascript for this test is fairly basic, although I found it difficult to find much helpful documentation online.

View javascript file

The initialisation call takes three arguments, firstly the size of the canvas, then a unique id to add to the new html canvas element, and finally the id of an existing html element in order to attach it to the page. In this experiment, the canvas element is square, with the circle placed directly at the centre, although it would be simple to change it to any size, and position the circle anywhere within it.


// initialise canvas
canvasPieTimer.init(100, "canvaspietimer", "pietimerholder");

This is just a simple test, but it shows the potential for using javascript to update a graphic numerous times a second, without any significant slowdown on the part of the browser.

It would be very simple to pass in a few more parameters, such as foreground & background colours, time limit, and the function you would like called when the time elapses.

Canvas is set to be introduced properly as part of HTML5, and although it isn't yet fully supported by most major browsers, it certainly looks set to become increasingly popular in future years.

Comments

  1. praburaj praburaj
    I need to add a count down timer inside the pie circle .please help 19th May 2009, 13:16 #
  2. Pete G Pete G
    Unfortunately adding text in a canvas isn't the easiest thing to do.

    The easiest option may be to add a standard HTML text element through JavaScript, and just position this centrally within the pie chart with some CSS.     19th May 2009, 20:56 #
  3. Grant Bailey Grant Bailey
    Dear Pete,
    Thanks for your timer script which is terrific.
    I was wondering how difficult it would be to modify this script for compliance with XHTML 1. Do you have any suggestions.
    Thank you and kind regards,
    Grant Bailey     14th July 2010, 17:18 #
  4. Grant Bailey Grant Bailey
    Hi again Pete,

    Just to let you know, I've been unable to get your Pie Timer script to run under Internet Explorer 6&7. Surprisingly, it won't operate under my copy of Opera 10. I'm using Win XP.

    Have you had better luck with these browsers? I'd really like to employ your script but it needs to be cross-browser compatible.-

    Kind regards,

    Grant Bailey     15th July 2010, 08:42 #

Please feel free to add a comment

Add a comment

Prove you are human*

* denotes a required field.

Email addresses are for verification only, and will not be published

The RECAPTCHA spam protection enables me to differentiate between genuine human comments and computer-generated spam.