canvas transformation speeds

Benchmark created on

Preparation HTML

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

Test runner

Ready to run.

Testing in
TestOps/sec
rotate
var r = 0.14;
ctx.rotate( r );
ctx.setTransform( 1, 0, 0, 1, 0, 0 );
ready
rotate manual
var r = 0.14;
var cos = Math.cos(r),
    sin = Math.sin(r) ;
ctx.setTransform( cos, sin, -sin, cos, 0, 0 );
ctx.setTransform( 1, 0, 0, 1, 0, 0 );
ready
rotate inverse
var r = 0.14;
ctx.rotate( r );
ctx.rotate( -r );
ready
scale
var x = 4, y = 6;
ctx.scale( x, y );
ctx.setTransform( 1, 0, 0, 1, 0, 0 );
ready
scale manual
var x = 4, y = 6;
ctx.setTransform( x, 0, 0, y, 0, 0 );
ctx.setTransform( 1, 0, 0, 1, 0, 0 );
ready
scale inverse
var x = 4, y = 6;
ctx.scale( x, y );
ctx.scale( 1.0 / x, 1.0 / y );
ready
translate
var x = 4, y = 6;
ctx.translate( x, y );
ctx.setTransform( 1, 0, 0, 1, 0, 0 );
ready
translate manual
var x = 4, y = 6;
ctx.setTransform( 1, 0, 0, 1, x, y );
ctx.setTransform( 1, 0, 0, 1, 0, 0 );
ready
translate inverse
var x = 4, y = 6;
ctx.translate( x, y );
ctx.translate( -x, -y );
ready

Revisions

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