Q:

Why is setting HTML5's CanvasPixelArray values ridiculously slow and how can I do it faster?

I am trying to do some dynamic visual effects using the HTML 5 canvas' pixel manipulation, but I am running into a problem where setting pixels in the CanvasPixelArray is ridiculously slow.
For example if I have code like:
imageData = ctx.getImageData(0, 0, 500, 500);

for (var i = 0; i < imageData.length; i += 4){
    imageData.data[i] = buffer[i];
    imageData.data[i + 1] = buffer[i + 1];
    imageData.data[i + 2] = buffer[i + 2];
}

ctx.putImageData(imageData, 0, 0);

Profiling with Chrome reveals, it runs 44% slower than the following code where CanvasPixelArray is not used.
tempArray = new Array(500 * 500 * 4);
imageData = ctx.getImageData(0, 0, 500, 500);

for (var i = 0; i < imageData.length; i += 4){
    tempArray[i] = buffer[i];
    tempArray[i + 1] = buffer[i + 1];
    tempArray[i + 2] = buffer[i + 2];
}

ctx.putImageData(imageData, 0, 0);

My guess is that the reason for this slowdown is due to the conversion between the Javascript doubles and the internal unsigned 8bit integers, used by the CanvasPixelArray.

Is this guess correct?
Is there anyway to reduce the time spent setting values in the CanvasPixelArray? 

A:

Try caching a reference to the data pixel array.  Your slowdown could be attributed to the additional property accesses to imageData.data.  See this article for more explanation.
E.g.  This should be faster that what you currently have.
var imageData = ctx.getImageData(0, 0, 500, 500),
    data = imageData.data,
    len = data.length;

for (var i = 0; i < len; i += 4){
 data[i] = buffer[i];
 data[i + 1] = buffer[i + 1];
 data[i + 2] = buffer[i + 2];
}

ctx.putImageData(imageData, 0, 0);

A:

I don't know if this helps you because you want to manipulate pixels, but for me, in Firefox 3.6.8, just the call to putImageData was very, very slow, without doing any pixel manipulation.  In my case, I just wanted to restore a previous version of the image that had been saved with getImageData.  Too slow.
Instead, I got it to work well using toDataUrl/drawImage instead. For me it's working fast enough that I can call it within handling a mousemove event:
To save:
savedImage = new Image()  
savedImage.src = canvas.toDataURL("image/png")

The to restore:
ctx = canvas.getContext('2d')  
ctx.drawImage(savedImage,0,0)

