Canvas drawImage vs putImageData

JavaScript performance comparison

Revision 12 of this test case created

Info

Test Canvas methods to detect any differences.

Preparation code

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

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