SOURCE

var c = document.getElementById("myCanvas");

function drawRuler(data, ele) {
    var ctx = ele.getContext('2d')
    ctx.lineWidth = 0.5;
    var start = {x: 20, y: ele.offsetHeight / 2};
    ctx.moveTo(start.x, start.y + 10);
    ctx.lineTo(start.x, start.y - 10);
    ctx.moveTo(start.x, start.y);

    var nextX = start.x;
    for (var i = 0, len = data.length; i < len; i++) {
        nextX += data[i];
        ctx.lineTo(nextX, start.y);
        ctx.moveTo(nextX, start.y + 10);
        ctx.lineTo(nextX, start.y - 10);
        ctx.moveTo(nextX, start.y);
    }
    ctx.stroke();
}

drawRuler([20,50, 89, 8, 30, 39], c);

<canvas id="myCanvas" width="700" height="100"
style="border:1px solid #000000;">
</canvas>