Canvas drawImage

JavaScript performance comparison

Revision 6 of this test case created by

Preparation code

<style>canvas {display: none;}</style>
<canvas id="canvas-256" width="256" height="256"></canvas>
<canvas id="canvas-512" width="512" height="512"></canvas>
<canvas id="canvas-1024" width="1024" height="1024"></canvas>
<canvas id="canvas-2048" width="2048" height="2048"></canvas>
<canvas id="canvas-4096" width="4096" height="4096"></canvas>
<canvas id="canvas-8192" width="8192" height="8192"></canvas>
<canvas id="canvas-16384" width="16384" height="16384"></canvas>

<canvas id="canvas-target" width="256" height="256"></canvas>
<script>
  function copyImageData(source, destination, sx, sy, sWidth, sHeight, dx, dy) {
    var imgdata = source.getContext('2d').getImageData(sx, sy, sWidth, sHeight);
    sWidth = imgdata.width;
    sHeight = imgdata.height;
    var dWidth = destination.width, dHeight = destination.height;
    var ctx = destination.getContext('2d');
    var maxX = Math.min(dx + sWidth, dWidth);
    var maxY = Math.min(dy + sHeight, dHeight);
    var minX = Math.max(0, dx), minY = Math.max(0, dy);
    var buffer = ctx.createImageData(maxX - minX, maxY - minY);
    dWidth = buffer.width;
    dHeight = buffer.height;
    for (var y = minY; y < dHeight; y++) {
      for (var x = minX; x < dWidth; x++) {
        var posSource = (y * sWidth + x) * 4;
        var posDestination = (y * dWidth + x) * 4;

        buffer.data[posDestination] = imgdata.data[posSource];
        buffer.data[posDestination + 1] = imgdata.data[posSource + 1];
        buffer.data[posDestination + 2] = imgdata.data[posSource + 2];
        buffer.data[posDestination + 3] = imgdata.data[posSource + 3];
      }
    }
    ctx.putImageData(buffer, minX, minY);
  }
</script>
      
<script>
Benchmark.prototype.setup = function() {
  var canvas256 = document.getElementById('canvas-256');
  var canvas512 = document.getElementById('canvas-512');
  var canvas1024 = document.getElementById('canvas-1024');
  var canvas2048 = document.getElementById('canvas-2048');
  var canvas4096 = document.getElementById('canvas-4096');
  var canvas8192 = document.getElementById('canvas-8192');
  var canvas16384 = document.getElementById('canvas-16384');
  var canvasTarget = document.getElementById('canvas-target');
  
  canvas256.getContext('2d').fillRect(0, 0, 256, 256);
  canvas512.getContext('2d').fillRect(0, 0, 512, 512);
  canvas1024.getContext('2d').fillRect(0, 0, 1024, 1024);
  canvas2048.getContext('2d').fillRect(0, 0, 2048, 2048);
  canvas4096.getContext('2d').fillRect(0, 0, 4096, 4096);
  canvas8192.getContext('2d').fillRect(0, 0, 8192, 8192);
  canvas16384.getContext('2d').fillRect(0, 0, 16384, 16384);
  
  var ctxTarget = document.getElementById('canvas-target').getContext('2d');
  var width = 128, height = 128;

};
</script>

Preparation code output

<style>canvas {display: none;}</style> <canvas id="canvas-256" width="256" height="256"></canvas> <canvas id="canvas-512" width="512" height="512"></canvas> <canvas id="canvas-1024" width="1024" height="1024"></canvas> <canvas id="canvas-2048" width="2048" height="2048"></canvas> <canvas id="canvas-4096" width="4096" height="4096"></canvas> <canvas id="canvas-8192" width="8192" height="8192"></canvas> <canvas id="canvas-16384" width="16384" height="16384"></canvas> <canvas id="canvas-target" width="256" height="256"></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

Revisions

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

0 Comments