Rotating an image in all browsers (canvas in IE?)

Question

I finally got to work with canvas only to find out that it is not implemented in IE. I tried explore canvas from google to use it in Internet Explorer, but it's not working for my code (http://uptowar.com/test.php - little bug though that it is not removing the old image when rotating).

So, is there an other way to smoothly rotate an image around it's bottom center angle? Maybe javascript? Or is there a way to do it with IE and canvas anyway?

Edit: Google Chrome also seems to add an ugly border to the canvas example.. there must be an other smooth way?

Edit2: tried a hacky javascript way: it causes mayor lags and corrupts the image (http://uptowar.com/test2.php), anyone knows of a working method?

Answer 1

There are some frameworks (eg. Dojo) offering a cross-browser drawing interface. They use canvas on most browsers, and VML on IE flavors. VML is Vector Markup Language, a kind of proprietary ancestor of SVG.

I searched svg vml library in Google and was surprised there are lot of libraries, apparently.

Answer 2

perhaps just use an animated .gif file

Flash is another alternative if you want more control.

Answer 3

RaphaelJS is a great cross-browser JavaScript library that might do exactly what you need. I highly recommend it. If you visit the site there is even a specific example that involves rotating an image.