Canvas draw image comparison (v4)

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

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

var imageWidth = 100;
var imageHeight = 100;

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
for (i = 0; i < 500; i += 100)
  for (j = 0; j < 500; j += 100)
    ctx.drawImage(img, i, j);
ready
Canvas Image
for (i = 0; i < 500; i += 100)
  for (j = 0; j < 500; j += 100)
    ctx.drawImage(canvasImage, i, j);
ready
Image dataURL
for (i = 0; i < 500; i += 100)
  for (j = 0; j < 500; j += 100)
    ctx.drawImage(dataImage, i, j);
ready

Revisions

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