Fastest canvas drawing with no rotation (v30)

Revision 30 of this benchmark created by Jakub on

Description

What is the fastest way to draw on a canvas? Image from public URL? Image from data URL? Canvas used as image?

I'm testing this to know what method to use for storing and blitting tiles in a 2D tile engine.

Preparation HTML

<canvas width=400 height=300></canvas>
<script>
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var url = 'http://www.freegreatdesign.com/files/images/6/2865-weather-png-icon-7-3.jpg';
var pattern, patterncvs;

var img = new Image();
img.onload = function() {
        var t = document.createElement('canvas');
        t.width = 4;
t.height = 3;
        var c = t.getContext('2d');
        c.drawImage(img, 0, 0);
        tdimg.src = t.toDataURL();
        
        cvsimg.getContext('2d').drawImage(img, 0, 0);
        
        pattern = ctx.createPattern(img);
        patterncvs = ctx.createPattern(cvsimg);

}
img.src = url;

var tdimg = new Image();
var cvsimg = document.createElement('canvas');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Web URL Image
ctx.rotate(10);
ctx.drawImage(img, 50, 50);
ready
data URL Image
ctx.rotate(10);
ctx.drawImage(tdimg, 50, 50);
ready
Canvas Image
ctx.rotate(10);
ctx.drawImage(cvsimg, 50, 50);
ready
Pattern of web URL image
ctx.rotate(10);
ctx.fillStyle = pattern;
ctx.fillRect(50, 50, 128, 128);
ready
Pattern of canvas
ctx.rotate(10);
ctx.fillStyle = patterncvs;
ctx.fillRect(50, 50, 128, 128);
ready

Revisions

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