67564 2011-09-03 09:23:45 -0700 CanvasPixelArray should be implemented as a Uint8Array 2012-04-09 17:04:42 -0700 1 1 1 Unclassified WebKit Canvas 528+ (Nightly build) All All RESOLVED DUPLICATE 82802 P5 Enhancement --- 0 jhuckaby webkit-unassigned guanqun.lu ian mdelaney7 oldest_to_newest 461825 0 jhuckaby 2011-09-03 09:23:45 -0700 Currently, when using a Canvas and createImageData() or getImageData() are called, an "ImageData" object is returned containing the requested pixels as an array in the "data" property. But the pixel array is implemented as a "CanvasPixelArray" object. This should instead be implemented as a Uint8Array, backed by an ArrayBuffer. CanvasPixelData is theoretically already an "accelerated" array, and was introduced before typed array classes. But returning an actual Uint8Array has a number of important advantages. For one, it standardizes accelerated arrays to always use the typed array system, instead of having a strange one-off "CanvasPixelData" class. But most importantly, it would allow developers to cast the array as something else, like a Uint32Array (i.e. create another "view" of the ArrayBuffer). Right now, setting a single canvas pixel involves 4 separate operations, because the "red", "green", "blue" and "alpha" channels are each separate elements in the array. But if the pixel array could be cast to a Uint32Array, then each pixel would take up only one element, and setting pixels could effectively be four times faster (depending on what the developer is doing). For example, you could pre-calculate 32-bit pixel values using bit-shift operations, then plop them into the Uint32Array 4 times faster than using an 8-bit array. Example: imageData = context.getImageData( 0, 0, 640, 480 ); var buffer = imageData.data.buffer; // get ArrayBuffer out of Uint8Array var pixels = new Uint32Array( buffer ); // create Uint32Array view of same buffer // precalculate a "white" opaque pixel as a 32-bit uint var alpha = 255, blue = 255, green = 255, red = 255; var pixel = (alpha) + (blue << 8) + (green << 16) + (red << 24); // pixels.length is only 1/4 of the size it normally would be, so this should be very fast for (var idx = 0, len = pixels.length; idx < len; idx++) { pixels[idx] = pixel; } context.putImageData( imageData, 0, 0 ); This change should theoretically not have any adverse affects, and all existing JavaScript canvas code should continue to work, because right now "CanvasPixelArray" is effectively just an accelerated array of 8-bit unsigned integers. I am merely suggesting changing the underlying implementation to a real Uint8Array, so the data can be type cast if desired. If the developer doesn't cast, it will continue to work exactly the same as it does now. This would be extremely useful for Canvas based games. Thanks for your time! - Joe 471249 1 jhuckaby 2011-09-21 16:30:39 -0700 FYI, this has now shown up on the WHATWG: http://html5.org/tools/web-apps-tracker?from=6558&to=6559 And Firefox 6 has implemented it. 598781 2 ian 2012-04-09 17:04:42 -0700 *** This bug has been marked as a duplicate of bug 82802 ***