Canvas draw image comparison

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 = 'http://jsperf.com/apple-touch-icon.png';

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.