HTML5: The Mandelbrot Set on Canvas

A simple example of rendering the Mandelbrot Set onto a HTML5 canvas element using javascript. Click on the image to zoom in. Only 50 iterations are used here, so detail degrades rapidly. The javascript is here for anyone interested.

Performance varies wildly between different browsers, platforms and architectures; Google Chrome is consistently fast and Opera is consistently slow. Firefox 3.5 is fastest of all, except currently with 64-bit builds, because the Javascript JIT only works for 32-bit so far.

However, the mozilla.org (32-bit) build of Firefox exhibits some strange behaviour. Despite the excellent rendering performance for the fractal images, the little zoom box which inverts colours in the area to be magnified, has some very noticeable lag compared to the Ubuntu 64-bit build (i.e. without the JS JIT), and indeed, all other browsers/builds/platforms I have tested.

This is strange considering it only uses the exact the same API functions to modify the pixel data, yet with a much reduced area and a vastly simpler arithmetic process. So perhaps the problem there lies with the mousemove event somehow? More investigation required still...

I have yet to try the Ubuntu 32-bit build of Firefox on this machine. I'll be interested to know if the zoom box lag is limited to Mozilla's 32-bit build, or a more general 32-bit Linux issue.