HTML5 canvas 3D pixel array

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 (not really a problem, more an inconvenience) is that the array of pixels is one-dimensional. getImageData returns pixels in the following format:

( R₀, G₀, B₀, A₁, R₁, G₁, B₁, A₁, … )

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.