Canvas drawImage Scaling Performance

JavaScript performance comparison

Test case created by digitarald

Preparation code

<img id="image" src="http://jsperf.com/favicon.ico" />
<canvas id="canvas" width="32" height="32"></canvas>
      
<script>
Benchmark.prototype.setup = function() {
  var image = document.getElementById("image"),
    canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    w = image.width,
    h = image.height;
  
  // clear
  canvas.height = canvas.height;

};
</script>

Preparation code output

<img id="image" src="http://jsperf.com/favicon.ico" /> <canvas id="canvas" width="32" height="32"></canvas>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Scale Down
context.drawImage(image, 0, 0, w, h, 0, 0, w / 2, h / 2);
pending…
Scale Up
context.drawImage(image, 0, 0, w, h, 0, 0, w * 2, h * 2);
pending…
Scale Half Up
context.drawImage(image, 0, 0, w, h, 0, 0, w * 1.5, h * 1.5);
pending…
No Scale
context.drawImage(image, 0, 0, w, h, 0, 0, w, h);
pending…
No Scale Short
context.drawImage(image, 0, 0);
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.

1 Comment

Bnaya commented :

The code doesn't wait the image to load. is that a valid test?