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.

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

});

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

});

// 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();
});

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:

• Revision 1: published on 25th January 2013
• Revision 2: published on 25th January 2013
• Revision 3: published on 25th January 2013 and last updated on 26th January 2013

0 comments