pre-render vs drawimage (v2)

Revision 2 of this benchmark created on

Preparation HTML

<canvas id="canvas1">
</canvas>
<canvas id="canvas2">
</canvas>
<script>
  (function() {
    var lastTime = 0;
    var vendors = ["ms", "moz", "webkit", "o"];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
      window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
      window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] || window[vendors[x] + "CancelRequestAnimationFrame"];
    }

    if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() {
        callback(currTime + timeToCall);
      }, timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };

    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };

  }());

  var c_canvas = document.createElement("canvas");
  var c_context = c_canvas.getContext("2d");
  c_canvas.width = 100;
  c_canvas.height = 100;
  drawCircle();

  function drawCircle() {
    c_context.clearRect(0, 0, 2000, 1000);
    c_context.beginPath();
    c_context.fillStyle = 'red';
    c_context.lineWidth = 4;
    c_context.arc(50, 50, 35, 0, 2 * Math.PI, true);
    c_context.stroke();
    c_context.fill();
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
render
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
canvas1.width = 2000;
canvas1.height = 100;

function mainLoop1() {
  context1.clearRect(50, 0, 200, 200);
  context1.beginPath();
  context1.fillStyle = "red";
  context1.lineWidth = 4;
  context1.arc(0, 50, 35, 0, 2 * Math.PI, true);
  context1.stroke();
  context1.fill();
}
mainLoop1();
ready
pre-render
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");
canvas2.width = 2000;
canvas2.height = 100;

function mainLoop2() {
  context2.clearRect(0, 0, 200, 200);
  context2.drawImage(c_canvas, 0, 0, 100, 100, 0, 0, 100, 100);
}
mainLoop2();
ready

Revisions

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