image-scaling

JavaScript performance comparison

Test case created by Simon

Preparation code

<canvas id="canvas1" width="400" height="400">
   
</canvas>

<script>
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var img = new Image();
var imgData;
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}

img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADZklEQVRYR62Va0hTYRjHn+FolPfUaWbmpEKyoBsxYkFIQREsCqIIIu0KCkUUIdTHglFf6kN30vwiRp8chVIRQiMkKldNEY01J4Vp4lQsiMni/8Kz3h3PbZfnyzmc8573/3v/z+VYKI247doV0/q8yffSYmZrU4vUNoL4zpJS8apydW3CkrnpKXrS3yeeGYGkBMDiLGxdvoKi30eFIN8D4kPgI321WHQhkgbQE2cbZAg4oedCUgCyeHi4n4rs5ZSdX7jAfjwDBGJ64LNIhxZE0gDHt9VRy9vX1HixnIba5uMQAAqNj9HmdZuEMIMB5MHTtvQB+PSvJn4KcXIWEPVGBAQC4q5TdvI9HE+AyDgAbIelgJjsKqXJ8R9xcc4FIBBwA07AsbRTwA4AAAEItCEcqT9ZQllVWxNqYT70Lu5G2jWgFMepkHOID+dMkKe5niDIEHz/6MpzOlS7Mf0iBAA2QsByBJ8c9xCG2Imre8U7vsd1VSymOwsMuwDipw8eE+0EcaQAV6X1SoAz7R66f6RZAKU8B2RxPj3XAKZcV+4vunZ4LdnqLgihaPCNuFqrt4srAFIexbLtLC73uQzAuR+59Z5WntsixFEH2fXthg4vWMB/OGXOWZzb7kZxkFwNayhyb0wIwgk5LncM0M1uf/IA2EQJwRvL4hWOPKraUSZeOZ011OHpiesXDJIpcXygS6hW/Xf/BMRpm/wDQlCGYILe3kHqa1lEnV5vag6wC8o0QBw9j2j2PKZRm59yHRviEAwAccffsCkXNAn59Nz3qAFUPQAgvme2mLgO5NxDvP1AjpgNWGdUB6oAsjj6HSNXeXotAMD4Wofo2fmzohOMilETQD6VPG6xIYsrCxHfIP8yBKdLywnDIoEbSoCAbYbUxOUiZIjO/U5dF0wBcAqwqZG4shOMitEQgDvixdLForIjNf9bj2eAnC4ZINQzRlPBSt12NAWwz+2OFVaHafZbYtthAGkFauFLazdFY+7MAUAMEIj1DbvFVQ2CxTEjMubAnCUQLzxYyyCAgJBWZBQgn4Kqk092gduQ8w8wvZFsqgawCeoALjAEnvF/QHl6Fm+c/E13ipZkDgAbVtnL6NL8DFktXk3rYTuvXVbhoKMjnzQhknLgelYe8YaaSVd5kZEUcBqMcpoMGNb+A7XFNz+SM2VIAAAAAElFTkSuQmCC'
</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 scale
can.width = can.width;
ctx.drawImage(img, 0, 0, 32, 32, 0, 0, 128, 128);
pending…
scale
can.width = can.width;
ctx.scale(4, 4);
ctx.drawImage(img, 0, 0);
ctx.scale(-4, -4); // put in for fairness. In normal use we'd usually have to scale the context back after drawing something scaled
pending…

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

Compare results of other browsers

0 comments

Add a comment