Alex's Experiments

Canvas experiments.

Zoom In/Out using HTML 5 Canvas element

I played a little with HTML5 canvas. I was thinking about how to make zoom-in/out for image in web application. If you make ordinary image tag just with bigger properties height and width, than you get bigger  blurred image. It's not suitable for me. I need effect similar to stand alone applications like in Photoshop: if I magnify image 10 times, than there should be sharp colored squares (10x10 px) representing each pixel.




Canvas element has ability to take canvas image data as array of pixel colors. Also you can define canvas data by providing such array. So I've made couple of example where I process such data with JavaScript.

Here you can find demo. Try it with Firefox or other browses supported HTML 5 Cavnas element (not IE 6/7)
By clicking mouse with right/left buttons you can zoom in/out.  (But do it gently)

In the second demo you can find same effect but you should scroll your mouse wheel (also gently) and to move picture around you need to drag it.

In the third demo I used blurred magnification (that I mentioned earlier) but I tried to make grid to distinguish each pixel while zooming in.

I didn't find any suitable solution for my task. First two are very slow when you have big images and lot movements, even if you use much optimized JavaScript. Image with sizes 512x512 px (as I used in my demo) is represented as 512*512*4 = 104 8576 length's array. When you magnify it 5 times you get 5 242 880 length's array.

In first demo I didn't get whole image data at once, but only needed piece of image. But it happens very often while you move mouse around and its eats lot of memory and processor time.

In second demo I firstly make whole image magnification and after it you just move it around. So as you zoom in pixel array is growing exponentially, which leads to longer and longer pause.

Cropping Tool and Life game
In this demo I've made cropping tool with canvas. You can click and drag on empty space (above image) for make rectangles. After making some rectangles you can move it around and resizing it with right bottom corner.


In this demo you can find classic zer0-player Life Game. Try to run it by clicking Start button. If you want you can change initial droids count and life rules ("Live if there is from"). Also you can change speed by changing FPS value.