How to draw pixels from an arraybuffer to the canvas very fast?

Question

I have an asmjs module, which works on an ArrayBuffer called 'MEM'. The repaint function is called in every loop. In the first 'siz' bytes are the pixel colors stored. My code works, but it runs slow. Is it possible to make it faster somehow? The arraybuffer can't be 'siz' length, because the module works on the whole ArrayBuffer.

var MEM = new ArrayBuffer(2*1024*1024);
var MEMU8 = new Uint8Array(MEM);
var imgData=ctx.createImageData(canvas.width,canvas.height);
var siz = (canvas.width*canvas.height*4)|0;

var rePaint = function() {
    var i=0;

    module.repaint();

    i=siz;
    while(i--) {
        imgData.data[i] = MEMU8[i];
    }

    ctx.putImageData(imgData, 0, 0);
    requestAnimationFrame(rePaint);
};

Answer 1

You can gain performance by using the typed array's .set method:

Unfortunately, IE still uses the CanvasPixelArray instead of the new html specification (Uint8ClampedArray). IE's imageData.data doesn't yet have the .set method.

But you can still use .set indirectly using a conversion array:

// create a typed array to pipe data through
// (used to be able to do .set later)

buffer = new ArrayBuffer(imgData.data.length);

converterArray=new Uint8Array(buffer);

// In repaint

imgData.data = converterArray.set(MEMU8.subarray(0,siz));