Speed of getImageData (v2)

Revision 2 of this benchmark created on

Preparation HTML

<canvas id="root" style="display:none"></canvas>

Setup

root = document.getElementById("root");
    root.width = 2000;
    root.height = 2000;
    screenCanvas = root.getContext("2d");
    bufferLarge = screenCanvas.createImageData(2000, 2000);
    bufferMediumLarge = screenCanvas.createImageData(1000, 1000);
    bufferMedium = screenCanvas.createImageData(500, 500);
    bufferSmall = screenCanvas.createImageData(250, 250);
    bufferSmaller = screenCanvas.createImageData(125, 125);

Test runner

Ready to run.

Testing in
TestOps/sec
Get Single Pixel
screenCanvas.getImageData(0, 0, 1, 1).data;
ready
Set Large Block
screenCanvas.putImageData(bufferLarge, 0, 0);
ready
Set Medium-Large Block
for (var i = 0; i < 2; i++) {
  for (var j = 0; j < 2; j++) {
    screenCanvas.putImageData(bufferMediumLarge , 500 * i, 500 * j);
  }
}
ready
Set Medium Blocks
for (var i = 0; i < 4; i++) {
  for (var j = 0; j < 4; j++) {
    screenCanvas.putImageData(bufferMedium, 500 * i, 500 * j);
  }
}
ready
Set Smaller Blocks
for (var i = 0; i < 8; i++) {
  for (var j = 0; j < 8; j++) {
    screenCanvas.putImageData(bufferSmall, 250 * i, 250 * j);
  }
}
ready
Set Even Smaller Block
for (var i = 0; i < 16; i++) {
  for (var j = 0; j < 16; j++) {
    screenCanvas.putImageData(bufferSmaller, 125 * i, 125 * j);
  }
}
ready

Revisions

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