JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/fabric@latest/dist/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>
  <canvas id="canvas" class="" width="640" height="512" style="border:1px solid black"></canvas>
  <div id="debug" style="width: 640px; padding: 5px 0 0 5px;">debug:</div>
</body>

JavaScript

$(document).ready(function() {
  var canvas,circles,points,polygon,shape,matrix,nodeNum=0;
  var mouse,orgLeft=0,orgTop=0,nodeX,nodeY;
  
  canvas = new fabric.Canvas($('canvas')[0],{ objectCaching:false,
                   preserveObjectStacking:true,perPixelTargetFind:true });
  points = [{"x":60,"y":40},{"x":100,"y":60},{"x":100,"y":100},{"x":60,"y":120},{"x":20,"y":100},{"x":20,"y":60}]
  
  polygon = new fabric.Polygon(points,{selectable:true,objectCaching:false});
  canvas.add(polygon); shape = polygon; 
  orgLeft = shape.left; orgTop = shape.top;
  addNodes(shape);
  
canvas.on('mouse:move', function(e){
  mouse = canvas.getPointer(e);
  $('#debug').text('x:'+parseInt(mouse.x)+' y:'+parseInt(mouse.y)
  +' shapeCenter:'+parseInt(polygon.getCenterPoint().x));
});

canvas.on('object:moving', function (e) {
  if (e.target.get('type')=='circle') {
    var node = e.target;
    nodeX = node.getCenterPoint().x; nodeY = node.getCenterPoint().y
    polygon.points[node.nodeNum] = {x:nodeX-(polygon.left-orgLeft), y:nodeY-(polygon.top-orgTop)};
    //node.setCoords();
    polygon.setCoords();
  }
});

shape.on('mousedown', function(e) {
  nodes.forEach((node, i) => { canvas.remove(node); });
});

shape.on('modified', function () {
  addNodes(this);
});

canvas.on('mouse:up', function(e) {
  if (e.target && e.target.get('type')=='circle') {
  var node = e.target;
  //const { width, height, left, top } = polygon._calcDimensions();
  //polygon.set({width,height,
      //pathOffset: new fabric.Point(left + width / 2, top + height / 2),
  //}).setCoords();
  }
});

function addNodes(shape) {
  matrix = shape.calcTransformMatrix(); nodeNum=0;
  var transformedPoints = shape.get("points").map(function(p){
    return new fabric.Point( p.x - shape.pathOffset.x, p.y - shape.pathOffset.y);
    }).map(function(p){
      return fabric.util.transformPoint(p, matrix);
  });
  
  nodes = transformedPoints.map(function(p){
    return new...