Canvas drawImage vs putImageData (v12)

Revision 12 of this benchmark created on

Description

Test Canvas methods to detect any differences.

Preparation HTML

<canvas width=364 height=126 id="c1">
</canvas>
<img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg"
id="imgd">
<script>
  var c1 = document.getElementById('c1').getContext('2d');

  var img = document.getElementById('imgd');
  c1.drawImage(img, 0, 0);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
DrawImage
function d(i) {
  c1.drawImage(img, 0, 0);
}
execute(d)
ready
resize image
function r(i) {
  this.style.width = 'auto';
  img.style.height = 'auto';
  if (img.width / img.height >= 310 / 215) {
    // landscape
    img.style.width = '310px';
  } else {
    // portrait
    img.style.height = '215px';
  }

  img.style.opacity = 1;
}
ready

Revisions

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