Canvas Context Scaling

JavaScript performance comparison

Test case created by Evan Mallory

Preparation code

<canvas id="canvas" width="1000" height="1000"></canvas>
      

      <script>

        Benchmark.prototype.setup = function() {

setTimeout(function () { 
  ui.benchmarks[1].setup = function (){
    window.ctx.scale(.5, .5);
  };
}, 1);
        
 };
      
<script>
Benchmark.prototype.setup = function() {
  var canvas = window.canvas = document.getElementById("canvas");
  var ctx = window.ctx = canvas.getContext("2d");

};
</script>

Preparation code output

<canvas id="canvas" width="1000" height="1000"></canvas> <script> Benchmark.prototype.setup = function() { setTimeout(function () { ui.benchmarks[1].setup = function (){ window.ctx.scale(.5, .5); }; }, 1); };

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
No Scale
ctx.beginPath();
      ctx.arc(250, 250, 150, 0, 2 * Math.PI, false);
      ctx.fillStyle = 'green';
      ctx.fill();
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#003300';
      ctx.stroke();
pending…
0.5 Scale
ctx.beginPath();
      ctx.arc(250, 250, 150, 0, 2 * Math.PI, false);
      ctx.fillStyle = 'green';
      ctx.fill();
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#003300';
      ctx.stroke();
pending…

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

0 Comments