Canvas State Stacking vs State Setting

JavaScript performance comparison

Test case created by

Preparation code

 <canvas id="myCanvas" width="640" height="480" style="background-color: #EEE;">
        </canvas> 
      
<script>
Benchmark.prototype.setup = function() {
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');

};
</script>

Preparation code output

<canvas id="myCanvas" width="640" height="480" style="background-color: #EEE;"> </canvas>

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 Stacking

    ctx.strokeStyle = "#4d0505";
    ctx.fillStyle = "#f00";
    ctx.font = "12px Arial";
    
    var text = "Canvas is easy";
    
    ctx.fillText(text, 100, 100 );
    ctx.strokeText(text, 100, 100 );
    
    ctx.strokeStyle = "#05084d";
    ctx.fillStyle = "#4500ff";
    ctx.font = "10px Arial";
    
    text = "Really!";
    
    ctx.fillText(text, 100, 124 );
    ctx.strokeText(text, 100, 124 );

    ctx.strokeStyle = "#4d0505";
    ctx.fillStyle = "#f00";
    ctx.font = "12px Arial";
    
    text = "Believe me!";
    
    ctx.fillText(text, 100, 148 );
    ctx.strokeText(text, 100, 148 );
pending…
With Stacking
ctx.strokeStyle = "#4d0505";
    ctx.fillStyle = "#f00";
    ctx.font = "12px Arial";
    
    var text = "Canvas is easy";    
    ctx.fillText(text, 200, 100 );
    ctx.strokeText(text, 200, 100 );
    
    ctx.save();
    ctx.strokeStyle = "#05084d";
    ctx.fillStyle = "#4500ff";
    ctx.font = "10px Arial";
    text = "Really!";
    ctx.fillText(text, 200, 124 );
    ctx.strokeText(text, 200, 124 );
    ctx.restore();
    
    text = "Believe me!";
    ctx.fillText(text, 200, 148 );
    ctx.strokeText(text, 200, 148 );
    
pending…

Compare results of other browsers

Revisions

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

0 Comments