Pre-clipped and Canvas-clipped stroke performance testing

gistfile1.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

var WIDTH = 500;
var HEIGHT = 500;

function drawoutline(id) {
  var el = $(id);
  var ctx = el[0].getContext('2d');
  ctx.strokeStyle = "rgba(255,0,0,255)";
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(0,HEIGHT);
  ctx.lineTo(WIDTH,HEIGHT);
  ctx.lineTo(WIDTH,0);
  ctx.lineTo(0,0);
  ctx.stroke();
}

function drawOverStroke(id, y) {
  var el = $(id);
  var ctx = el[0].getContext('2d');
  ctx.strokeStyle = "rgba(255,0,0,255)";
  ctx.beginPath();
  ctx.moveTo(WIDTH/2,y);
  ctx.lineTo(WIDTH/2+WIDTH,y);
  ctx.stroke();
}    

var clips = 0;

function drawClippedStroke(id, y) {
  var el = $(id);
  var ctx = el[0].getContext('2d');
  ctx.strokeStyle = "rgba(255,0,0,255)";
  ctx.beginPath();
  ctx.moveTo(WIDTH/2,y);
  ctx.lineTo(WIDTH,y);
  ctx.stroke();
  clips++;
}    

$(function() {
  drawoutline('#a');
  drawoutline('#b');

  console.time("pre-clipped stroke");
  for(var i = 0; i < 500; i++) {
    for(var y = 0; y<HEIGHT; y++) {
      drawClippedStroke('#a',y);
    }
  }
  console.timeEnd("pre-clipped stroke");

  console.time("canvas-clipped stroke");
  for(var i = 0; i < 500; i++) {
    for(var y = 0; y<HEIGHT; y++) {
      drawOverStroke('#a',y);
    }
  }
  console.timeEnd("canvas-clipped stroke");


});

</script>

<style>
#a {
  width: 500px;
  height: 500px;
  display: inline-block;
}
#b {
  width: 500px;
  height: 500px;
  display: inline-block;
}
</style>

<canvas id="a" width="500" height="500"></canvas>
<canvas id="b" width="500" height="500"></canvas>