Benchmark.js

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<ul id='cycleResults'>

</ul>
<div id="result">

</div>
<br>
<button id="btn">
Run Tests
</button>


<div style="height: 1920px">
  <canvas id="cnv" width="1920" height="1080"></canvas>
</div>
<img id="img" src="http://mozilla.org/media/img/firefox/template/header-logo-inverse.png" style="display: none" />

JavaScript

function createCanvas(w, h) {
  var canvas = document.createElement('canvas');
  canvas.setAttribute('width', w);
  canvas.setAttribute('height', h);
  return canvas;
}
function clear(ctx) {
	ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}


var g_img = document.getElementById('img');
var ctx1 = document.getElementById('cnv').getContext('2d');
var ctx2 = createCanvas(1920, 1080).getContext('2d');
var ctx3 = createCanvas(1920, 1080).getContext('2d');
ctx3.drawImage(g_img, 0, 0);

function test1() {
	clear(ctx1);
  ctx1.drawImage(ctx3.canvas, 0, 0,185,70,0,0,185,70);
}


function test2() {
  clear(ctx2);
  ctx2.drawImage(ctx3.canvas, 0, 0,185,70,20,0,185,70);
	clear(ctx1);
  ctx1.drawImage(ctx2.canvas, 0, 0,185,70,0,0,185,70);
}
var cycleResults = document.getElementById('cycleResults');
var result = document.getElementById('result');
var btn = document.getElementById('btn');

// BENCHMARK ====================
btn.onclick = function runTests(){

  btn.setAttribute('disable', true);
	cycleResults.innerHTML = '';
  result.textContent = 'Tests running...';
  
  var suite = new Benchmark.Suite;

  // add tests
  suite
  .add('test1', test1)
  .add('test2', test2)
  // add listeners
  .on('cycle', function(event) {
    var result = document.createElement('li');
    result.textContent = String(event.target);
    
    document.getElementById('cycleResults')
    	.appendChild(result);
  })
  .on('complete', function() {
    result.textContent = 'Fastest is ' + this.filter('fastest').pluck('name');
    btn.setAttribute('disable', false);
  })
  // run async
  .run({ 'async': true });
};