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
getImageData(). The problem (not really a problem, more an
inconvenience) is that the array of pixels is one-dimensional.
getImageData returns pixels in the following format:
( R0, G0, B0, A1, R1, G1, B1, A1, … )
As a human, that’s really tough to work with, so this script converts that to a more logical 3D array (X by Y by RGBA)
Here is the source image, drawn into a canvas directly from the image.
Click to convert the 1D pixel array to a 2D pixel array. From there, you could easily do any coordinate-based operations to the pixels. The convert function converts it back from 2D to 1D and draws it into the canvas below.