drawImage from img vs drawImage from canvas vs putImageData (v20)

Revision 20 of this benchmark created by a_bicky on

Preparation HTML

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

Test runner

Ready to run.

Testing in
TestOps/sec
drawImage using HTMLImageElement
for (var i = 0; i < n; i++) {
  ctx.drawImage(imageArray[i], 0, 0);
}
ready
drawImage using HTMLCanvasElement
for (var i = 0; i < n; i++) {
  ctx.drawImage(canvasArray[i], 0, 0);
}
ready

Revisions

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