Fastest canvas drawing (v13)

Revision 13 of this benchmark created by Poch 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="renderCanvas" width="256" height="256"></canvas>
<br><br><br>
<canvas id="previewCanvas_url" width="256" height="256"></canvas>
<br>
<canvas id="previewCanvas_dataurl" width="256" height="256"></canvas>
<br>
<canvas id="previewCanvas_objecturl" width="256" height="256"></canvas>
<br>
<canvas id="previewCanvas_cvsimg" width="256" height="256"></canvas>
<br>
<canvas id="previewCanvas_imgpix" width="256" height="256"></canvas>

<script>
var canvas = document.getElementById('renderCanvas');
var ctx = canvas.getContext('2d');
var imgSize = 256;

var previewCanvas_url = document.getElementById('previewCanvas_url');
var previewCanvas_url_ctx = previewCanvas_url.getContext('2d');
var previewCanvas_dataurl = document.getElementById('previewCanvas_dataurl');
var previewCanvas_dataurl_ctx = previewCanvas_dataurl.getContext('2d');

var previewCanvas_objecturl = document.getElementById('previewCanvas_objecturl');
var previewCanvas_objecturl_ctx = previewCanvas_objecturl.getContext('2d');

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

var imgpix;
var dataUrlImg = new Image();
var urlimg = new Image();
var cvsimg = document.createElement('canvas');
var BlobBuilder = (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder);
var blobBuilder = new BlobBuilder();

var img = new Image();
img.onload = function() {
        previewCanvas_url_ctx.drawImage(img, 0, 0);
        var tempCanvas = document.createElement('canvas');
        tempCanvas.width = tempCanvas.height = imgSize;
        var tempCtx = tempCanvas.getContext('2d');
        tempCtx.drawImage(img, 0, 0);
        dataUrlImg.src = tempCanvas.toDataURL();
        previewCanvas_dataurl_ctx.drawImage(dataUrlImg, 0, 0);
        
        tempCanvas = document.createElement('canvas');
        tempCanvas.width = tempCanvas.height = imgSize;
        tempCtx = tempCanvas.getContext('2d');
        tempCtx.drawImage(img, 0, 0);
        var tempCtxURL = tempCanvas.toDataURL();
        blobBuilder.append(tempCtxURL);
        var blob = blobBuilder.getBlob();
        urlimg.src = blob;
        cvsimg.getContext('2d').drawImage(img, 0, 0);
        var renderCanvas = document.getElementById('renderCanvas').getContext('2d');
        imgpix = renderCanvas.getImageData(0,0,imgSize,imgSize);
}
img.src = url;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Web URL Image
ctx.drawImage(img, 0, 0);
ready
data URL Image
ctx.drawImage(dataUrlImg, 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.