html vs svg vs canvas (v10)

Revision 10 of this benchmark created on

Preparation HTML

<canvas width="1600" height="1600" id="canvas"></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1600" id="svg"></svg>

Setup

var objSvg = document.getElementById("svg");
                        var xmlns = "http://www.w3.org/2000/svg";
                        var xlinkns = "http://www.w3.org/1999/xlink";
    
    
                        var objCanvas = document.getElementById("canvas");
                        var objContext = objCanvas.getContext('2d');

Teardown


    while (objSvg.firstChild) {
      objSvg.removeChild(objSvg.firstChild);
    }
    objContext.clearRect(0, 0, objCanvas.width, objCanvas.height);

Test runner

Ready to run.

Testing in
TestOps/sec
canvas
var img = new Image();

img.onload = function() {

  var min = 0;
  var max = 1600;
  var maxScale = 1;
  var minScale = 0.1;
  var x = Math.floor(Math.random() * (max - min + 1)) + min;
  var y = Math.floor(Math.random() * (max - min + 1)) + min;
  var rot = Math.floor(Math.random() * (359 - 0 + 1)) + 0;

  var scale = Math.floor(Math.random() * (maxScale - minScale + 1)) + minScale;

  objContext.drawImage(img, x, y);

}

img.src = "http://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg";
ready
svg
var tigerImg = "http://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg";

var min = 0;
var max = 2200;
var maxScale = 400;
var minScale = 200;
var x = Math.floor(Math.random() * (max - min + 1)) + min;
var y = Math.floor(Math.random() * (max - min + 1)) + min;
var rot = Math.floor(Math.random() * (359 - 0 + 1)) + 0;

var scaleX = Math.floor(Math.random() * (maxScale - minScale + 1)) + minScale;
var scaleY = Math.floor(Math.random() * (maxScale - minScale + 1)) + minScale;
var svgElem = document.createElementNS("http://www.w3.org/2000/svg", "image");

svgElem.setAttributeNS(null, "x", x);
svgElem.setAttributeNS(null, "y", y);

svgElem.setAttributeNS(null, "width", scaleX);
svgElem.setAttributeNS(null, "height", scaleY);
svgElem.setAttributeNS(null, "transform", "rotate(" + rot + ", " + (x + scaleX / 2) + ", " + (y + scaleY / 2) + ")");


svgElem.setAttributeNS("http://www.w3.org/1999/xlink", "href", tigerImg);
objSvg.appendChild(svgElem);
ready

Revisions

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