< 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 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");
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.