<html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title></head><body></body></html>xxxxxxxxxx.ruler, .ruler li { margin: 0; padding: 0; list-style: none; display: inline-block;}/* IE6-7 Fix */.ruler, .ruler li { *display: inline;}.ruler { background: #fff; border-radius: 2px; color: #8b8b8b; margin: 0; height: 2em; padding-right: 20px; white-space: nowrap; font-size:9px;}.ruler li { padding-left: 30px; width: 2em; margin: .64em -1em -.64em; text-align: center; position: relative;}.ruler li:before { content: ''; position: absolute; border-left: 1px solid #c1bfbf; height: .64em; top: -.64em; right: 1em;}xxxxxxxxxxvar 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)); });}