Tag Archives: javascript animation

An Initial Salvo into HTML5

HTML 5 Logo

I’ve been playing with the drawing API for flash for a long time now, but I’ve not really looked into drawing using the HTML5 canvas tag. So i decided to take a gander at the W3C Canvas 2D context spec.

I decided to do a little test to compare drawing with AS3 to drawing with Javascript. I used a little animation I had done where I draw a circle over time, but vary the radius with time so it doesn’t end up as a circle. You can check out the javascript here, i’m sure it’s clunky and definitely not perfect in any way, I just wanted to knock up a quick demo.

One thing of note is that relying on a setInterval in javascript for an == conditional clause is highly unreliable. I think the condition was met once initially, and then never again as the browser jerked its way through the animation, resulting in the clearInterval never being called. Instead of checking for equality i ended up checking for greater than or equal to. Seemed to work.

It seems like a bit of a pain to draw over time with canvas, or just doing vector drawing in general.

Here’s the link