Fabric.js linear feet Line

Draw vertical end-lines using x-y coords. RestorePro

by brightertools

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>
<button id="drawArrows">Draw Arrows</button>

JavaScript

// - Click the "Draw Arrows" button to draw a horizontal line, 2 vertical end lines with arrows at each end.
var lineZ, newLine, newLine1, triangleRight, triangleLeft, myLine, group, newStart;
var canvas = new fabric.Canvas('c', {
    selection: true
});
canvas.on('object:scaling', function(e) {
    // group.item(0).setScaleX(1);
    var line1 = group.item(1);
    var  line2 = group.item(2);
    var arrow1 = group.item(3);
    var arrow2 = group.item(4);
	var textRect = group.item(5);
    var newText1 = group.item(6);
    canvas.remove(newText1);
    canvas.remove(arrow1);
    canvas.remove(arrow2);
    canvas.remove(line1);
    canvas.remove(line2);
    canvas.remove(textRect);
    canvas.renderAll();


    //  canvas.renderAll();
    var groupScaleX = group.getScaleX(),
        percentX = groupScaleX * 100,
        textScaleX = (percentX / (groupScaleX * groupScaleX)) / 100,
        groupScaleY = group.getScaleY(),
        percentY = groupScaleY * 100,
        textScaleY = (percentY / (groupScaleY * groupScaleY)) / 100,
        groupAngle = group.getAngle();
    
     newStart = (e.e.clientX - myLine.x1) / 20;
    
    newText1.set({
        text: newStart.toFixed() + ' ft',
        opacity: 1,
        scaleX: textScaleX,
        scaleY: textScaleY
    });
      textRect.set({
                    opacity: 1,
                    scaleX: textScaleX,
                    scaleY: textScaleY
                });
       line1.set({
                    opacity: 1,
                    scaleX: textScaleX,
                    scaleY: textScaleY
                });
       line2.set({
                    opacity: 1,
                    scaleX: textScaleX,
                    scaleY: textScaleY
                });
         arrow1.set({
                        opacity: 1,
                        scaleX: textScaleY,
                        scaleY: textScaleX
                    });
                    arrow2.set({
                        opacity: 1,
                       ...