Canvas drawImage vs putImageData (v13)

Revision 13 of this benchmark created on

Description

Test Canvas methods to detect any differences.

Preparation HTML

<canvas width=364 height=126 id="c1"></canvas>

<canvas width=364 height=126 id="c2"></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 c2 = document.getElementById('c2').getContext('2d');
  var c2_c = document.getElementById('c2');
  var img = document.getElementById('imgd');
  c1.drawImage(img, 0, 0);
  var imgData = c1.getImageData(0, 0, parseInt(img.width), parseInt(img.height));
  
  function execute(drawMethod) {
      for(var i=0; i<100; i++) {
         drawMethod(i);
      }
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
DrawImage
function d(i) {
   c1.drawImage(img, 0, 0);
}
execute(d)
ready
Resize image
img.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
DrawImage(canvas)
function p(i) {
   c1.drawImage(c2_c, 0, 0);
}
execute(p)
ready

Revisions

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