css_vs_canvas (v3)

Revision 3 of this benchmark created on

Preparation HTML

<head>
  <style type="text/css">
  <!--

    canvas {
      position: absolute;
      top: 0px;
      left: 0px;
      border: thin solid #000000;
    }
  -->
  </style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
  <div id="canvas"></div>
  <div id="message"></div>
  <div class="logging"></div>
</body>
<script>
  var imageList, i, imageCnt, sizeListW, sizeListH;
  
  sizeListW = [820, 46, 100, 800, 800, 144, 180, 108, 108, 138]
  sizeListH = [615, 42, 75, 150, 600, 25, 25, 25, 25, 42]
  
  
  imageCnt = 10;
  imageList = new Array();
  imageList[0] = new Image();
  imageList[0].src = "http://xen3.uguu.jp/nihaha/image/00000.jpg";
  imageList[0].onload = function() {
   window.alert("Test")
   imageCnt--;
   if (imageCnt === 0) {
    // default value
    var i, canvasTag, layerNum = 100,
        width = 800,
        height = 600,
        tagId = "canvas";
    canvasTag = "";
    // Genelate Canvas tag
    for (i = 0; i < layerNum; i++) {
     canvasTag += "<canvas class =\"canvas" + i + "\" id =\"" + i + "\" width =\"" + width + "\" height = \"" + height + "\" style=\"z-index:" + (layerNum - i) + ";\"></canvas>"
    }
    document.getElementById(tagId).innerHTML += canvasTag;
    window.alert("Ready!")
   }
  };
  for (i = 1; i < 10; i++) {
   imageList[i] = new Image();
   imageList[i].src = "http://xen3.uguu.jp/nihaha/fgimage/" + ("00000" + (i + 2100)).slice(-5) + ".png";
   imageList[i].onload = imageList[0].onload;
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
canvas
var i, dom, ctx;

for (i = 0; i < 10; i++) {
 dom = document.getElementById(99 - i);
 dom.style.opacity = 1;
 ctx = dom.getContext("2d");
 ctx.globalAlpha = 1 / (i + 1);
 ctx.clearRect(i, i, sizeListW[i], sizeListH[i]);
 ctx.drawImage(imageList[i], i, i);
}
ready
css
var i, dom, ctx;

for (i = 0; i < 10; i++) {
 dom = document.getElementById(99 - i);
 dom.style.opacity = 1 / (i + 1);
 ctx = dom.getContext("2d");
 ctx.globalAlpha = 1;
 ctx.clearRect(i, i, sizeListW[i], sizeListH[i]);
 ctx.drawImage(imageList[i], i, i);
}
ready

Revisions

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