Draw Image Stretch VS No Stretch

Benchmark created by Austin on July 22, 2012

Preparation HTML

<canvas id="src" width="100" height="100">
</canvas>
<canvas id="dst" width="100" height="100">
</canvas>
<script>
  var src = document.getElementById('src');
  var dst = document.getElementById('dst');
  var src_ctx = src.getContext('2d');
  var dst_ctx = dst.getContext('2d');

  var imageData = src_ctx.createImageData(100, 100);
  var data = imageData.data;
  var i = 0;
  while (i < 100 * 100 * 4) {
    data[i++] = Math.random() * 255 | 0;
    data[i++] = Math.random() * 255 | 0;
    data[i++] = Math.random() * 255 | 0;
    data[i++] = 255;
  }
  src_ctx.putImageData(imageData, 0, 0);
</script>

Test runner

dst_ctx.drawImage(src, 0, 0);

dst_ctx.drawImage(src, 0, 0, 100, 100);

//dst_ctx.drawImage(src, 0, 0 100, 100, 0, 0, 100, 100);
//dst_ctx.drawImage(src, 0, 0 100, 100);

Revisions

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

• Revision 1: published by Austin on July 22, 2012