Canvas cache test

Benchmark created by George on March 3, 2016

Description

Preparation HTML

<div id="canvasContainer"></div>

Setup

var cache = document.createElement('canvas');
    container = document.getElementById('canvasContainer'),
    canvas = document.createElement('canvas'),
    w = 50,
    h = 80;
    
    function _draw(canvas, x, y, w, h) {
      var ctx = canvas.getContext('2d');
    
      ctx.beginPath();
    
      ctx.moveTo(x, y + 4);
    
      ctx.lineTo(x + w - 4, y + 4);
      ctx.lineTo(x + w - 4, y + h - 4);
      ctx.lineTo(x + 4, y + h - 4);
      ctx.lineTo(x + 4, y);
    
      ctx.fillStyle = '#d8d8d8';
      ctx.fill();
    
      ctx.lineWidth = 8;
      ctx.strokeStyle = '#000000';
      ctx.stroke();
    
      ctx.closePath();
    
      ctx.fillStyle = '#ff0000';
      ctx.fillRect(x, y, 1, 1);
      ctx.fillRect(x + w - 1, y, 1, 1);
      ctx.fillRect(x + w - 1, y + h - 1, 1, 1);
      ctx.fillRect(x, y + h - 1, 1, 1);
    }
    
    canvas.width = 100;
    canvas.height = 100;
    
    cache.width = w;
    cache.height = h;
    _draw(cache, 0, 0, w, h);

Teardown

    container.innerHTML = '';
  

Test runner

_draw(canvas, 20, 20, w, h);
container.appendChild(canvas);

var ctx = canvas.getContext('2d');
ctx.drawImage(cache, 20, 20);
container.appendChild(canvas);

Revisions

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

• Revision 1: published by George on March 3, 2016