Canvas draw image comparison (v6)

Revision 6 of this benchmark created on

Description

Checking draw speed of the drawImage canvas method of an Image loaded from URL, an Image from dataURL and another canvas.

Based on http://jsperf.com/fastest-canvas-drawing but that one was throwing errors for me.

Preparation HTML

<canvas width=500 height=500></canvas>
<script>
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var url = 'https://picsum.photos/200';

var dataImage = new Image();
var canvasImage = document.createElement('canvas');

var imageWidth = 120;
var imageHeight = 120;

var img = new Image();
img.onload = function() {
        var tmpCanvas = document.createElement('canvas');
        tmpCanvas.width = imageWidth;
        tmpCanvas.height = imageHeight;
        var c = tmpCanvas.getContext('2d');
        c.drawImage(img, 0, 0);
        dataImage.src = tmpCanvas.toDataURL();
        
        var canvasImageContext = canvasImage.getContext('2d');
        canvasImageContext.width = imageWidth;
        canvasImageContext.height = imageHeight;
        canvasImageContext.drawImage(img, 0, 0);
}
img.src = url;

</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Web URL Image
ctx.drawImage(img, 0, 0);
ready
Canvas Image
ctx.drawImage(canvasImage, 0, 0);
ready
Image dataURL
ctx.drawImage(dataImage, 0, 0);
ready

Revisions

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