html vs svg vs canvas (v11)

Revision 11 of this benchmark created on

Setup

var xmlns = "http://www.w3.org/2000/svg";
  var xlinkns = "http://www.w3.org/1999/xlink";
  
  var objSvg = document.createElementNS(xmlns, "svg");
  
  var objCanvas = document.createElement("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() {
  for (var i = 0; i < 200; i++) {
    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://commons.wikimedia.org/wiki/File:Example.svg";
ready
svg
var tigerImg = "http://commons.wikimedia.org/wiki/File:Example.svg";

for (var i = 0; i < 200; i++) {
  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.