getImageData / putImageData small/large

JavaScript performance comparison

Revision 9 of this test case created by

Preparation code

<canvas id="canvas" width="1024" height="1024" style="display: none">
</canvas>
<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, 1024, 1024);
  }
  
  var external_data_1024 = ctx.createImageData(1024, 1024);
  var external_data_source_1024 = ctx.createImageData(1024, 1024);
  var external_data_32 = ctx.createImageData(32,32);
</script>
    

Preparation code output

<canvas id="canvas" width="1024" height="1024" style="display: none"> </canvas>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
canvas clear/getImageData/putImageData (1024)
clear_canvas();

var data = ctx.getImageData(0, 0, 1024, 1024);

ctx.putImageData(data, 0, 0);
pending…
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;
    };
    ctx.putImageData(data, x * 32, y * 32);
  }
};
pending…
createImageData/clear/draw/putImageData (1024)
var data = ctx.createImageData(1024, 1024);
for (var i = 0; i < 1024 * 1024 * 4; i++) {
   data.data[i] = 0;
};

ctx.putImageData(data, 0, 0);
pending…
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;
};

ctx.putImageData(data, 0, 0);
pending…
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;
    };
    ctx.putImageData(data, x * 32, y * 32);
  }
};
pending…
fill/get/put
ctx.globalCompositeOperation = 'copy';
ctx.fillStyle = 'rgba(0,0,0,1)';
ctx.fillRect(0, 0, 1024, 1024);
var data = ctx.getImageData(0, 0, 1024, 1024);
ctx.putImageData(data, 0, 0);
pending…
Simpler clear
ctx.clearRect(0, 0, 1024, 1024);
var data = ctx.getImageData(0, 0, 1024, 1024);
ctx.putImageData(data, 0, 0);
pending…
Direct variable for array
var data = external_data_1024.data;
for (var i = 0; i < 1024 * 1024 * 4; i++) {
   data[i] = 0;
};
ctx.putImageData(external_data_1024, 0, 0);
pending…
Copy array
external_data_1024.data.set(external_data_source_1024.data);
ctx.putImageData(external_data_1024, 0, 0);
pending…

Compare results of other browsers

Revisions

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

0 Comments