Canvas multiple images vs single image draw

JavaScript performance comparison

Test case created

Info

Test to visualise the performance difference between drawing multiple small images onto a canvas vs drawing one large one

Preparation code

<img id="src_small_1"/>
<img id="src_small_2"/>
<img id="src_small_3"/>
<img id="src_small_4"/>
<img id="src_small_5"/>
<img id="src_small_6"/>
<img id="src_small_7"/>
<img id="src_small_8"/>
<img id="src_small_9"/>
<img id="src_small_10"/>

<img id="src_large_1"/>

<canvas id="destCanvas" width="1000" height="100"></canvas>
<script>
Benchmark.prototype.setup = function() {
    var tempCanvas = document.createElement("canvas");
    var tempCtx = tempCanvas.getContext("2d");
    tempCanvas.width = 102;
    tempCanvas.height = 576;
   
    var ctx = document.getElementById("destCanvas").getContext("2d");
   
   
    for (var i=0;i<10;i++)
    {
        var destImage = document.getElementById("src_small_" + (i+1));
   
        tempCtx.fillStyle="rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ", " + parseInt(Math.random() * 255) + ")";
        tempCtx.fillRect(0,0,102,576);
        destImage.src = tempCanvas.toDataURL();
   
    }
   
    tempCanvas.width = 1024;
    tempCanvas.height = 576;
   
    tempCtx.fillStyle = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ", " + parseInt(Math.random() * 255) + ")";
    tempCtx.fillRect(0,0,1024,576);
   
    var largeImage = document.getElementById("src_large_1");
    largeImage.src = tempCanvas.toDataURL();
   
   
   
    var smallImages = [];
    smallImages[0] = document.getElementById("src_small_1");
    smallImages[1] = document.getElementById("src_small_2");
    smallImages[2] = document.getElementById("src_small_3");
    smallImages[3] = document.getElementById("src_small_4");
    smallImages[4] = document.getElementById("src_small_5");
   
    smallImages[5] = document.getElementById("src_small_6");
    smallImages[6] = document.getElementById("src_small_7");
    smallImages[7] = document.getElementById("src_small_8");
    smallImages[8] = document.getElementById("src_small_9");
    smallImages[9] = document.getElementById("src_small_10");
   
    var largeImage = document.getElementById("src_large_1");
   
    var ctx = document.getElementById("destCanvas").getContext("2d");
   
};
</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
Drawing multiple small images
for (var i=0;i<smallImages.length;i++)
{
ctx.drawImage(smallImages[i], i * 1000, 0);

}
 
pending…
Drawing one large image
ctx.drawImage(largeImage, 0,0);
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