canvas drawing

JavaScript performance comparison

Revision 3 of this test case created and last updated

Preparation code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.js"></script>
<script>
Benchmark.prototype.setup = function() {
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext("2d");
                canvas.width = 640;
                canvas.height = 480;
                $("body").append(canvas);
   
                var fullImageCanvas = document.createElement('canvas');
                var fullImage = new Image();
                fullImage.src = "";
                fullImageCanvas.width = 640;
                fullImageCanvas.height = 480;
               
                var overImageCanvas = document.createElement('canvas');
                var overImage = new Image();
                overImage.src = "";
                overImageCanvas.width = 6400;
                overImageCanvas.height = 480;
   
                var quarterImageCanvas = document.createElement('canvas');
                var quarterImage = new Image();
                quarterImage.src="";
                quarterImageCanvas.width = 320;
                quarterImageCanvas.height = 240;
   
   
                $([fullImage, overImage, quarterImage]).imagesLoaded(function(){
                       
                        fullImageCanvas.getContext("2d").drawImage(fullImage,0,0,640,480);
                        overImageCanvas.getContext("2d").drawImage(overImage,0,0,6400,480);
                        quarterImageCanvas.getContext("2d").drawImage(quarterImage,0,0,320,240);
   
   
    });
};
</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
overImage
// async test
$([fullImage, overImage, quarterImage]).imagesLoaded(function(){
                       
ctx.drawImage(fullImageCanvas, 0,0, 640, 480);
deferred.resolve();

});
pending…
fullImage
// async test
$([fullImage, overImage, quarterImage]).imagesLoaded(function(){
                       
ctx.drawImage(overImageCanvas, 0, 0, 640, 480, 0, 0, 640, 480);
deferred.resolve();

});
pending…
tiled
// async test
$([fullImage, overImage, quarterImage]).imagesLoaded(function(){
                       
                        ctx.drawImage(quarterImageCanvas, 0,0, 320, 240);
                        ctx.drawImage(quarterImageCanvas, 320,0, 320, 240);
                        ctx.drawImage(quarterImageCanvas, 0,240, 320, 240);
                        ctx.drawImage(quarterImageCanvas, 320,240, 320, 240);
deferred.resolve();
});
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