Rotating Canvas graphics

Rotating canvas example

The canvas element let you do some marvelous tricks with images. Imagine the canvas as an IMG element extended with the ability to set/change every pixel of it.

In this demo an image is loaded in an IMG element, this image is copied in the canvas element and rotated 360 degrees. You can see the original image just below the canvas element.

Refresh page to restart drawing!

Picture used for drawing

Interestingly, you see quite different rendering qualities in the browsers. MS Explorer doesn’t show anything. Google Chrome surprisingly shows the worst quality, it’s output is jagged and doesn’t seemed to be aliased. Opera is best, followed by Firefox and Safari.

I did expect to see speed differences, no render differences. If you don’t want to test in all browsers, or you don’t have them installed, you can see the results here.

Tags: canvas, HTML5, SVG

This entry was posted on Friday, September 12th, 2008 at 9:55 pm and is filed under HTML5, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.