var canvas = new fabric.Canvas('canvas');

line_length = 14000;

adjusted_length = line_length / 6.367;

canvas.add(new fabric.Line([100, 100, adjusted_length, 100], {
        left: 30,
        top: 50,
        stroke: '#d89300',
		strokeWidth: 2
    }));
	
	$('#canvas_container').css('overflow-x', 'scroll');
	$('#canvas_container').css('overflow-y', 'hidden');
	
	drawRuler();


function drawRuler(){
	$("#ruler[data-items]").val(line_length / 200);

    $("#ruler[data-items]").each(function() {
        var ruler = $(this).empty(),
            len = Number($("#ruler[data-items]").val()) || 0,
            item = $(document.createElement("li")),
            i;
			ruler.append(item.clone().text(1));
        for (i = 1; i < len; i++) {
            ruler.append(item.clone().text(i * 200));
        }
		ruler.append(item.clone().text(i * 200));
    });
}