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);
};

How? ImageDada.data is an UInt8ClampedArray, that's why I created a Uint8Array, and copy every elements. — Iter Ator, Mar 03 '14 at 19:58
Have a look here : http://stackoverflow.com/questions/20811194/fast-way-to-fill-a-canvas-with-an-array-of-rgba-colors/20814610#20814610 — GameAlchemist, Mar 03 '14 at 20:46

markE · Accepted Answer · 2014-03-03T22:31:34.843

3

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));

edited Mar 03 '14 at 22:31

answered Mar 03 '14 at 20:45

markE

102,905
11
164
176

1

Uncaught RangeError: Source is too large – Iter Ator Mar 03 '14 at 21:22
I'm guessing your buffer size is probably larger than `siz`. So you can cut MEMU8 down with: imgData.data = converterArray.set(MEMU8.subarray(0,siz)); – markE Mar 03 '14 at 22:25

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

1 Answers1