getImageData / putImageData small/large (v4)

Revision 4 of this benchmark created by Nico Kruger on

Description

Now on the next test: In the previous version, we did not concern ourselves with the CREATION of the image buffers at all. In this test, we will add this (important factor) into consideration.

There are two ways to get an image buffer - createImageData (which creates blank data), and getImageData (which gets the current buffer from a canvas). These two both have their own respective advantages/disadvantages.

So here we test a combination of different ways of clearing the canvas, getting image data, drawing, all for both one large block and many small blocks.

Preparation HTML

<canvas id="canvas" width="1024" height="1024" style="display: none"/>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  
  function clear_canvas() {
    // The following is the proven fastest way to clear the canvas
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = 'rgba(0,0,0,1)';
    ctx.fillRect(0, 0, 1, 1);
    ctx.clearRect(0, 0, 500, 500);
  }
  
  var external_data_1024 = ctx.createImageData(1024, 1024);
  var external_data_32 = ctx.createImageData(32,32);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
canvas clear/getImageData/putImageData (1024)
clear_canvas();

var data = ctx.getImageData(0, 0, 1024, 1024);
for (var i = 0; i < 1024 * 1024 * 4; i++) {
  data.data[i] = Math.round(Math.random() * 255, 0);
};

ctx.putImageData(data, 0, 0);
ready
createImageData/putImageData (32)
for (var y = 0; y < 1024 / 32; y++) {
  for (var x = 0; x < 1024 / 32; x++) {
    var data = ctx.createImageData(32, 32);
    // clear
    for (var i = 0; i < 32 * 32 * 4; i++) {
       data.data[i] = 0;
    };
    for (var i = 0; i < 32 * 32 * 4; i++) {
      data.data[i] = Math.round(Math.random() * 255, 0);
    }
    ctx.putImageData(data, x * 32, y * 32);
  }
};
ready
createImageData/clear/draw/putImageData (1024)
var data = ctx.createImageData(1024, 1024);
for (var i = 0; i < 1024 * 1024 * 4; i++) {
   data.data[i] = 0;
};

for (var i = 0; i < 1024 * 1024 * 4; i++) {
   data.data[i] = Math.round(Math.random() * 255, 0);
};

ctx.putImageData(data, 0, 0);
ready
external image data/clear/display/put (1024)
var data = external_data_1024;

for (var i = 0; i < 1024 * 1024 * 4; i++) {
   data.data[i] = 0;
};

for (var i = 0; i < 1024 * 1024 * 4; i++) {
   data.data[i] = Math.round(Math.random() * 255, 0);
};

ctx.putImageData(data, 0, 0);
 
ready
external image data/clear/draw/put (32)
for (var y = 0; y < 1024 / 32; y++) {
  for (var x = 0; x < 1024 / 32; x++) {
    var data = external_data_32;
    // clear
    for (var i = 0; i < 32 * 32 * 4; i++) {
       data.data[i] = 0;
    };
    for (var i = 0; i < 32 * 32 * 4; i++) {
      data.data[i] = Math.round(Math.random() * 255, 0);
    }
    ctx.putImageData(data, x * 32, y * 32);
  }
};
ready

Revisions

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