Canvas save-restore (v10)

Revision 10 of this benchmark created on

Preparation HTML

<canvas id="myCanvas" width="100" height="100"></canvas>
<script>
  var myCanvas = document.getElementById("myCanvas");
  var context2d = myCanvas.getContext("2d");
  context2d.canvas.width = 100;
  context2d.canvas.height = 100;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
without save-restore
context2d.translate(50, 50);
context2d.fillStyle = '#fc9';
context2d.beginPath();
context2d.arc(0, 0, 20, 0, 2 * Math.PI, false);
context2d.closePath();
context2d.fill();
context2d.fillStyle = null;
context2d.translate(-50, -50);
 
ready
save-restore
context2d.save();
context2d.translate(50, 50);
context2d.fillStyle = '#fc9';
context2d.beginPath();
context2d.arc(0, 0, 20, 0, 2 * Math.PI, false);
context2d.closePath();
context2d.fill();
context2d.restore();
 
ready
setTransform
context2d.setTransform(1, 0, 0, 1, 50, 50);
context2d.fillStyle = '#fc9';
context2d.beginPath();
context2d.arc(0, 0, 20, 0, 2 * Math.PI, false);
context2d.closePath();
context2d.fill();
 
ready

Revisions

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