canvas-cache2

Benchmark created by simon on October 3, 2011

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

setFill('blue');

setFillWithCache('blue');

setFillWithCache2('blue');

setFont('10px Verdana');

setFontWithCache('10px Verdana');

setFontWithCache2('10px Verdana');

Revisions

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

• Revision 1: published by simon on October 3, 2011