Fastest canvas drawing (v6)

Revision 6 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);
console.log( t, t.toBlob );
        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>

Setup

ctx.clearRect( 0, 0, 200, 200 );

Test runner

Ready to run.

Testing in
TestOps/sec
Web URL Image
ctx.drawImage(img, 0, 0, 32, 32);
ready
data URL Image
ctx.drawImage(tdimg, 0, 0, 32, 32);
ready
createObjectURL Image
ctx.scale( 2, 2 );
ctx.drawImage(urlimg, 0, 0);
ctx.scale( 0.5, 0.5 );
ready
Canvas Image
ctx.drawImage(cvsimg, 0, 0, 32, 32);
ready

Revisions

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