The new HTML5 CANVAS element gives the developer pixel-poking magic. Poke and peek are functions from the good old days that offered the only geeky way to set and read-out individual bytes in the (graphic) memory.

Sure things are better nowadays. To understand how canvas works, imagine an IMG element, of which every pixel can be set individually or loaded from a IMG source.

Opera screenshot canvas element

This means you can filter images, copy them, translate, rotate, scale, in short: a lot. It can also add drop-shadow, although at the moment this is only fully supported by Safari and partially by Opera. Probably Firefox will add support in the upcoming 3.1.

sec

Test again
Rendering is best in Opera and Firefox. Safari and Chrome look awful. Webkits’ canvas seems designed to work only with integers while Opera and Firefox translates floats into some anti-alias rendering. Better but probably slower. Opera’s rendering is quite slow.

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.