JSFiddle - React, Tailwind, and code Playground

by Ben Noble

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>

JavaScript

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

function makeRect(left, top, line1, line2) {
 var rect = new fabric.Rect({
        left: left,
        top: top,
        fill:  "Red",
        stroke: "Black",
        width: 100,
        height: 50,
        strokeWidth: 4, 
        opacity: .8, 
        hasControls: false,
        hasBorders: false 
    });
    
    rect.line1=line1;
    rect.line2=line2;
    
    return rect;
}

function makeLine(coords) {    
 return new fabric.Line(coords,{
      stroke: 'black',
      strokeWidth: 3,
      selectable: false
    });  
}

var line = makeLine([150,125,250,125]);

canvas.add(line);
canvas.add(
           makeRect (line.x1-100,line.y1-25,null,line),
           makeRect (line.x2,line.y2-25,line)
           );

canvas.on('object:moving', function(e) {
    var p = e.target;
    p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top +25 });
    p.line2 && p.line2.set({ 'x1': p.left+100, 'y1': p.top +25 });
    canvas.renderAll();
  });