Fastest canvas drawing (v5)

Revision 5 of this benchmark created on

Description

What is the fastest way to draw on a canvas? Image from public URL? Image from data URL? Image from URL.createObjectURL? 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 = '/favicon.ico';
var pattern, patterncvs;

if(typeof URL == "undefined")
        URL = webkitURL;

var img = new Image();
img.onload = function() {
        var t = document.createElement('canvas');
        t.width = t.height = 16;
        var c = t.getContext('2d');
        c.drawImage(img, 0, 0);
        tdimg.src = t.toDataURL();
        
        t = document.createElement('canvas');
        t.width = t.height = 16;
        c = t.getContext('2d');
        c.drawImage(img, 0, 0);
        urlimg.src = URL.createObjectURL(t.toBlob ? t.toBlob() : t.mozGetAsFile('file.png'));
        
        cvsimg.getContext('2d').drawImage(img, 0, 0);
        
        pattern = ctx.createPattern(img);
        patterncvs = ctx.createPattern(cvsimg);
}
img.src = url;

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

Test runner

Ready to run.

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

Revisions

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