Fastest canvas drawing (v17)

Revision 17 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 id="c1" width="400" height="300"></canvas>
<script>
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var url = 'http://www.webination.co.uk/blog/wp-content/uploads/2011/04/google-icon.png';

var BlobBuilder = (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder);
var blobBuilder = new BlobBuilder();

var img = new Image();
img.onload = function() {
        var t = document.createElement('canvas');
        t.width = t.height = 400;
        var c = t.getContext('2d');
        c.drawImage(img, 0, 0);
        tdimg.src = t.toDataURL();
        
        t = document.createElement('canvas');
        t.width = t.height = 400;
        c = t.getContext('2d');
        c.drawImage(img, 0, 0);
blobBuilder.append(t.toDataURL());
        urlimg.src = window.webkitURL.createObjectURL(blobBuilder.getBlob());
        cvsimg.getContext('2d').drawImage(img, 0, 0);
        var c1 = document.getElementById('c1').getContext('2d');
        imgpix = c1.getImageData(0,0,400,400);
}
img.src = url;
var imgpix;
var tdimg = new Image();
var urlimg = new Image();
var cvsimg = document.createElement('canvas');
</script>

Setup

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

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
putImageData (pixel render)
ctx.putImageData(imgpix, 0, 0);
ready

Revisions

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