canvas-cache2

Benchmark created by simon on


Preparation HTML

<canvas id="canvas1" width="500" height="500"></canvas>
<script>
    var can = document.getElementById('canvas1');
    var ctx = can.getContext('2d');
    
    ctx.lastFill = '';
    ctx.lastFont = '';
    
    function setFill(color) {
      ctx.fillStyle = color;
    }
    
    function setFillWithCache(color) {
      if (ctx.lastFill !== color) {
        ctx.fillStyle = color;
        ctx.lastFill = color;
      }
    }
    
    function setFillWithCache2(color) {
      if (ctx.fillStyle !== color) {
        ctx.fillStyle = color;
      }
    }
  
    function setFont(font) {
      ctx.font = font;
    }
    
    function setFontWithCache(font) {
      if (ctx.lastFont !== font) {
        ctx.font = font;
        ctx.lastFont = font;
      }
    }
  
    function setFontWithCache2(font) {
      if (ctx.font !== font) {
        ctx.font = font;
      }
    }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
fill
setFill('blue');
ready
fill cache
setFillWithCache('blue');
ready
fill cache2
setFillWithCache2('blue');
ready
font
setFont('10px Verdana');
ready
font cache
setFontWithCache('10px Verdana');
ready
font cache2
setFontWithCache2('10px Verdana');
ready

Revisions

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