rotate DOM element vs canvas (v14)

Revision 14 of this benchmark created by Andrew Petersen on

Description

Use CSS to rotate a dom element, compared to drawing a rotated box on canvas

Preparation HTML

<canvas id="cvs" width="320" height="200" style="border: 1px solid #CCCCCC;"></canvas>
<div id="stage" style="position: relative; width: 320px; height: 200px; border: 1px solid #CCCCCC;">
    <div id="dSpinner" style="position: absolute; width: 100px; height: 100px; background-color: black;"></div>
</div>
<script>
  var ctx = document.getElementById("cvs").getContext('2d'),
      dSpinner = document.getElementById("dSpinner"),
      dRotation = 0,
      cRotation = 0;
  
  var box = [
   [0, 0, 0],
   [100, 0, 0],
   [100, 100, 0],
   [0, 100, 0]
  ];
  
  // rotation matrix of 0.01 rads
  var rotMatrix = [0.9999500004166653, 0.009999833334166664, 0, 0, -0.009999833334166664, 0.9999500004166653, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
  
  ctx.globalAlpha = 0.1;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
canvas (save/rotate/restore)
//ctx.clearRect(0, 0, 320, 200); // i took this out because it's not fair
ctx.save();
ctx.rotate(cRotation);
ctx.fillRect(0, 0, 100, 100);
ctx.restore();
cRotation += 0.01;
ready
DOM (degrees)
dSpinner.style.webkitTransform = "rotate(" + dRotation + "deg)";
dSpinner.style.MozTransform = "rotate(" + dRotation + "deg)";
dSpinner.style.transform = "rotate(" + dRotation + "deg)";
dRotation += 1;
ready
canvas (transform points and draw)
ctx.strokeStyle = "#FFFFFF";
ctx.fillStyle = "#AAAAAA";

ctx.beginPath();
for (var i = 0; i < box.length; i++) {
 var vec = box[i],
     x = vec[0],
     y = vec[1],
     z = vec[2];

 vec[0] = rotMatrix[0] * x + rotMatrix[4] * y + rotMatrix[8] * z + rotMatrix[12];
 vec[1] = rotMatrix[1] * x + rotMatrix[5] * y + rotMatrix[9] * z + rotMatrix[13];
 vec[2] = rotMatrix[2] * x + rotMatrix[6] * y + rotMatrix[10] * z + rotMatrix[14];
 if (i === 0) {
  ctx.moveTo(x, y);
 }
 ctx.lineTo(x, y);
}
ctx.fill();
ready
canvas (transform points, then draw)
ctx.strokeStyle = "#FFFFFF";
ctx.fillStyle = "#FF3300";

for (var i = 0; i < box.length; i++) {
 var vec = box[i],
     x = vec[0],
     y = vec[1],
     z = vec[2];

 vec[0] = rotMatrix[0] * x + rotMatrix[4] * y + rotMatrix[8] * z + rotMatrix[12];
 vec[1] = rotMatrix[1] * x + rotMatrix[5] * y + rotMatrix[9] * z + rotMatrix[13];
 vec[2] = rotMatrix[2] * x + rotMatrix[6] * y + rotMatrix[10] * z + rotMatrix[14];
 if (i === 0) {
  ctx.moveTo(x, y);
 }
 ctx.lineTo(x, y);
}
ctx.beginPath();
ctx.moveTo(box[0][0], box[0][1]);
for (var i = 1; i <= box.length; i++) {
 var vec = i < box.length ? box[i] : box[0];
 ctx.lineTo(vec[0], vec[1]);
}
ctx.fill();
ready
DOM (radians)
dSpinner.style.webkitTransform = "rotate(" + dRotation + "rad)";
dSpinner.style.MozTransform = "rotate(" + dRotation + "rad)";
dSpinner.style.transform = "rotate(" + dRotation + "rad)";
dRotation += 0.01;
ready

Revisions

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

  • Revision 1: published by Andrew Petersen on
  • Revision 2: published by Andrew Petersen on
  • Revision 7: published by Andrew Petersen on
  • Revision 8: published by Andrew Petersen on
  • Revision 9: published on
  • Revision 10: published by Andrew Petersen on
  • Revision 11: published on
  • Revision 12: published by Andrew Petersen on
  • Revision 13: published by dave on
  • Revision 14: published by Andrew Petersen on