Fastest canvas drawing (v40)

Revision 40 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 bloburl= window.URL || window.webkitURL;


                               

var url = null;


var img = new Image();
img.onload = function() {
        var t = document.createElement('canvas');
        t.width = img.width;
  t.height = img.height
        var c = t.getContext('2d');
        c.drawImage(img, 0, 0);
var base64canv = document.createElement('canvas');
base64canv.width = img.width;
base64canv.height = img.height;
basectx = base64canv.getContext('2d');
basectx.drawImage(canvas, 0, 0);
        tdimg.src = canvas.toDataURL();
        
        t = document.createElement('canvas');
        t.width = t.height = 400;
        c = t.getContext('2d');
        c.drawImage(img, 0, 0);
canvas.toBlob(function(blob){
        urlimg.src = bloburl.createObjectURL(blob);
});
        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, canvas.width, canvas.height);

Test runner

Ready to run.

Testing in
TestOps/sec
Web URL Image
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(img, 0, 0);
ready
data URL Image
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(tdimg, 0, 0);
ready
createObjectURL Image
//ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(urlimg, 0, 0);
ready
Canvas Image
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(cvsimg, 0, 0);
ready
putImageData (pixel render)
ctx.globalCompositeOperation = 'source-in';
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.