Posts Tagged ‘canvas’

1 Comment

Canvas Rendering: Skewing Images by Javascript

Saturday, November 8th, 2008

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

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.


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.

Update 25-02-2011

Rendering time screen:

Chrome 9 : 50 msec
Opera 11.01:  667 msec
Firefox 3.613: 2829 msec

Opera and Firefox look fine, Chrome’s rendering is jagged.

1 Comment

Canvas Rendering Quality

Monday, October 20th, 2008

This post shows some surprising differences in rendering quality from various browsers.

As you can see the Google Chrome screen-shot is simply ugly. Google Chrome is fast in javascript calculations, but that seems to have a price.

Opera | Safari | Firefox | Chrome

It looks like Chrome is simply skipping some pixels and the rendering doesn’t seemed to be aliased.

You can run the example demo in your own browser to see the results.

1 Comment

Rotating Canvas graphics

Friday, September 12th, 2008

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.