[whatwg] [canvas] matrix based changes on bitmaps

[Charles Pritchard]

On 4/23/2012 2:38 PM, Tyler Larson wrote:
> Can we add matrix transformations?
> Looping over every pixel in JavaScript is slow. Many cool things could be taken care of much faster if the canvas had some form of matrix manipulations built in.
> All of the pixels could have one transformation operation defined and all of the pixels could be operated on at once in something lower level.
>
> It could look like this...
>
> context.transformMatrix([0.5,0.5,0.5,0,0,
> 					0.5,0.5,0.5,0,0,
> 					0.5,0.5,0.5,0,0,
> 					0,0,0,1,0,
> 					0,0,0,0,1]);
>
> It's far simpler than looping over an array of pixels and picking out the values of each color.
>
> Other graphics systems have ways of doing this already. You can easily find sample tutorials on how to create and transform matrixes.
> In some languages they have matrix objects that have methods for even easier manipulation of these transformations but I'm cool without this if it is easier.
>

WebKit recently landed Uint8ClampedArray. That brings us all in line 
with Typed Arrays.

Currently, if you want to do "fast" operations on a Canvas, you need to 
load it into WebGL and use GLSL to do your quick vector math.
It'd be nice to see a math object for Typed Arrays with similar power.

When we implemented Canvas independently (prior to WebGL publication), 
we simply stuck filters onto the ImageData object.
such as ImageData.blur().

But, directly addressing your example, I could see something like:

var a = new MatrixMath();
var b = ctx.getImageData(0,0,200,200);
a.mulAdd(b.width, b.height, b.data,  [0.5,0.5,0.5,0,0,
                     0.5,0.5,0.5,0,0,
                     0.5,0.5,0.5,0,0,
                     0,0,0,1,0,
                     0,0,0,0,1]);
a.process(function() { ctx.putImageData(a,0,0); });