canvas-drawImage

JavaScript performance comparison

Test case created by Ilmari

Preparation code

<script>
  var c = document.createElement('canvas');
  c.width = 256;
  c.height = 256;
 
  var ctx = c.getContext('2d');
  ctx.fillRect(64, 64, 128, 128);
 
  var img = new Image();
  img.src = c.toDataURL();
 
  var c2 = document.createElement('canvas');
  c2.width = 512;
  c2.height = 512;
  var ctx2 = c2.getContext('2d');
</script>

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
aligned
for (var i = 0; i < 100; i++) {
 ctx2.drawImage(c, 128, 128);
}
ctx2.getImageData(0, 0, 1, 1);
pending…
offset
for (var i = 0; i < 100; i++) {
 ctx2.drawImage(c, 128.5, 128.5);
}
ctx2.getImageData(0, 0, 1, 1);
pending…
scaled
for (var i = 0; i < 100; i++) {
 ctx2.save();
 ctx2.scale(0.95, 1.05);
 ctx2.drawImage(c, 128, 128);
 ctx2.restore();
}
ctx2.getImageData(0, 0, 1, 1);
pending…
aligned img
for (var i = 0; i < 100; i++) {
 ctx2.drawImage(img, 128, 128);
}
ctx2.getImageData(0, 0, 1, 1);
pending…
offset img
for (var i = 0; i < 100; i++) {
 ctx2.drawImage(img, 128.5, 128.5);
}
ctx2.getImageData(0, 0, 1, 1);
pending…
scaled img
for (var i = 0; i < 100; i++) {
 ctx2.save();
 ctx2.scale(0.95, 1.05);
 ctx2.drawImage(img, 128, 128);
 ctx2.restore();
}
ctx2.getImageData(0, 0, 1, 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:

1 comment

Ilmari Heikkinen commented :

If the scaled scores are close to the unscaled scores, they should be pretty much as fast as unscaled when hoisting the ctx2.scale outside the loop. And you probably have a HW-accelerated canvas implementation in that case.

Add a comment