Canvas drawImage vs putImageData

JavaScript performance comparison

Revision 13 of this test case created

Info

Test Canvas methods to detect any differences.

Preparation code

<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>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
DrawImage
function d(i) {
   c1.drawImage(img, 0, 0);
}
execute(d)
pending…
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;
pending…
DrawImage(canvas)
function p(i) {
   c1.drawImage(c2_c, 0, 0);
}
execute(p)
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment