Gcanvas ruler

ruler.js

function ruler(ctx, width, length) {
  ctx.font="5px helvetica";

  ctx.beginPath();

  // metric
  ctx.beginPath();
  for(var x = 1; x < length; ++x) {

    ctx.beginPath();

    // market line
    var ml = x % 10 ? 1 : 2;
    ctx.moveTo(x, 0);
    ctx.lineTo(x, ml);

    ctx.stroke();

    ctx.save();
    ctx.translate(x-5, 5);
    ctx.rotate(Math.PI/2);

    if(x && x % 10 === 0) {
      ctx.strokeText(x+'', 0, -2);
    }
    ctx.restore();
  }

  // inches
  for(var i = 1, x=0; x < length; i++) {

    x = i*25.4/8;

    ctx.beginPath();

    // market line
    var ml = i % 8 ? (i % 4 ? (i % 2 ? 1 : 2) : 3) : 4;

    ctx.moveTo(x, width-ml);
    ctx.lineTo(x, width);
    ctx.stroke();

    ctx.save();
    ctx.translate(x-1, width-ml-5);
    ctx.rotate(Math.PI/2);
    if(i && i % 8 === 0) {
      ctx.strokeText(i/8, 0, 0);
    }
    ctx.restore();
  }
}