This is another demo from 2009-ish. When I started experimenting with canvas, I felt uncomfortable with the 1-dimensionality of CanvasPixelArray. I wrote this script to convert it into a more logical format: X by Y by RGBA. Let me rephrase that. By "more logical", I mean "more logical, to me, at the time). 1D is fine, and I can't think of any use for this script. But, nonetheless, here it is, including the original description.

canvas pixarray

After loading an image file into a <canvas> element, you can retrieve its pixels with getImageData(). The problem is that the array of pixels is one-dimensional. The array would look something like this for a set of N pixels P_i where each pixel has bands RGBA with values 0..255:

( P_0R, P_0G, P_0B, P_0A, P_1R, P_1G, P_1B, P_1A, ... , P_(N-1)R, P_(N-1)G, P_(N-1)B, P_(N-1)A )

That's really tough to work with, so this script converts that to a more logical 3D array (X by Y by RGBA)

This canvas drawn from an image file:

Your browser does not support the <canvas> element. Lame.

This canvas drawn from the 3D image array:

Your browser does not support the <canvas> element. Lame.