drawImage from img vs drawImage from canvas vs putImageData

JavaScript performance comparison

Revision 20 of this test case created by a_bicky

Preparation code

<canvas width=256 height=256 id="canvas"></canvas>
<script type="text/javascript">
var imageURL = "http://jsrun.it/assets/m/t/O/t/mtOtb.png";
var n = 300;
var imageArray = [];
var canvasArray = [];

var ctx = document.getElementById('canvas').getContext('2d');
for (var i = 0; i < n; i++) {
    (function(i) {
        var img = new Image();
        img.onload = function() {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            canvas.getContext("2d").drawImage(img, 0, 0, canvas.width, canvas.height);
            canvasArray[i] = canvas;
        };
        img.src = imageURL + "?i=" + i;
        imageArray[i] = img;
    })(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 using HTMLImageElement
for (var i = 0; i < n; i++) {
  ctx.drawImage(imageArray[i], 0, 0);
}
pending…
drawImage using HTMLCanvasElement
for (var i = 0; i < n; i++) {
  ctx.drawImage(canvasArray[i], 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. Here’s a list of current revisions for this page:

0 comments

Add a comment