Canvas Pixel Manipulation (v19)

Revision 19 of this benchmark created by Arkanciscan on

Description

Tests two different methods of manipulating pixels using the canvas.

Preparation HTML

<canvas id="little" height="100" width="100">
</canvas>
<canvas id="big" height="200" width="200">
</canvas>

Setup

var little = document.getElementById('little');
    var littleCtx = little.getContext('2d');
    var littleImg = littleCtx.getImageData(0, 0, little.width, little.height);
    var littleData = littleImg.data;
    
    var big = document.getElementById('big');
    var bigCtx = big.getContext('2d');
    var bigImg = bigCtx.getImageData(0, 0, big.width, big.height);
    var bigData = bigImg.data;
    
    var buf = new ArrayBuffer(bigImg.data.length);
    var buf8 = new Uint8ClampedArray(buf);
    var data32 = new Uint32Array(buf);

Teardown


    bigCtx.putImageData(bigImg, 0, 0);
    littleCtx.putImageData(littleImg, 0, 0);

Test runner

Ready to run.

Testing in
TestOps/sec
8-bit Pixel Manipulation
for (i = 0; i < littleData.length; i++) {
  littleData[i] = Math.floor(Math.random() * 256);
}
ready
32-bit Pixel Manipulation
for (i = 0; i < data32.length; i++) {
  data32[i] = (Math.floor(Math.random() * 256) << 24) | // alpha
  (Math.floor(Math.random() * 256) << 16) | // blue
  (Math.floor(Math.random() * 256) << 8) | // green
  Math.floor(Math.random() * 256); // red
}

bigImg.data.set(buf8);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.