JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

HTML

<canvas width="400" height="400" id="canvas"></canvas>
<script src="https://unpkg.com/[email protected]/dist/fabric.js"></script>

CSS

canvas {
  border: 1px solid #999;
}

JavaScript

var canvas = new fabric.Canvas('canvas', {
  preserveObjectStacking: true
});

addPairedObjects();

function addPairedObjects() {
  var pairID = Date.now();
  canvas.add(
    new fabric.Rect({
      fill: 'orange',
      width: 200,
      height: 200,
      top: 50,
      left: 50,
      pairID: pairID,
      selectable: false
    })
  );
  canvas.add(
    new fabric.Ellipse({
      fill: 'teal',
      rx: 75,
      ry: 75,
      top: 75,
      left: 75,
      pairID: pairID
    })
  );
}

canvas.on({
  'selection:created': function(e) {
    updatePairedObject(e.target);
  },
  'selection:updated': function(e) {
    updatePairedObject(e.target);
  },
  'object:scaling': function(e) {
    setPropertiesFromObject(e.target, ['scaleX', 'scaleY']);
  },
  'object:moving': function(e) {
    //
  },
  'object:rotated': function(e) {
    //
  }
});

function updatePairedObject(obj) {
  if (obj && obj.pairID && !obj.pairedObject) {
    canvas.getObjects().forEach(function(item) {
      if (obj !== item && obj.pairID === item.pairID) {
        obj.pairedObject = item;
      }
    });
  }
}

function setPropertiesFromObject(obj, properties) {
	if(!obj || !obj.pairedObject) return;
  properties.forEach(function(property) {
    obj.pairedObject[property] = obj[property];
  });
  obj.pairedObject.setCoords();
}