Rotate with Context Restore and offset vs without

Benchmark created by AL on

Preparation HTML

<img src="http://placepuppy.it/300/300&n=6" id="testImg">
<canvas id="canvas" width="500" height="500"></canvas>

Setup

var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById('testImg');

Test runner

Ready to run.

Testing in
TestOps/sec
With Context Save
ctx.save();
ctx.translate(img.width / 2, img.height / 2);
ctx.rotate(45 * Math.PI / 180);
ctx.drawimage(img, 0,0);
ctx.restore();
ready
No Save State
ctx.translate(img.width / 2, img.height / 2);
ctx.rotate(45 * Math.PI / 180);
ctx.drawimage(img, 0 ,0);
ctx.rotate(-45 * Math.PI / 180);
ctx.translate(0,0);
 
ready

Revisions

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