Syncing objects

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>
<iframe id="iframe" width=500 heigth=500 src='https://touchitadmin.com'>

</iframe>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

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

var rect1 = new fabric.Rect({
    left: 100, top: 100,
    width: 50, height: 50,
    fill: 'red'
});

var rect2 = new fabric.Rect({
    left: 200, top: 200,
    width: 50, height: 50,
    fill: 'green'
});

var rect3 = new fabric.Rect({
    left: 100, top: 200,
    width: 50, height: 50,
    fill: 'blue'
});

canvas.add(rect1, rect2, rect3);

function onMoving(options) {
  if (options.target === rect1) {
    rect2.left = rect1.left + 100;
    rect2.top = rect1.top + 100;
    rect3.left = rect1.left;
    rect3.top = rect1.top + 100;
  }
  else if (options.target === rect2) {
    rect1.left = rect2.left - 100;
    rect1.top = rect2.top - 100;
    rect3.left = rect2.left - 100;
    rect3.top = rect2.top;
  }
  else if (options.target === rect3) {
    rect1.left = rect3.left;
    rect1.top = rect3.top - 100;
    rect2.left = rect3.left + 100;
    rect2.top = rect3.top;      
  }
  canvas.forEachObject(function(o){o.setCoords()});
}
function onRotating(options) {
  canvas.forEachObject(function(o){
    o.angle = options.target.angle;
  });
}
function onScaling(options) {
  canvas.forEachObject(function(o){
    o.scaleX = options.target.scaleX;
    o.scaleY = options.target.scaleY;
  });
}
canvas.on('object:moving', onMoving);
canvas.on('object:rotating', onRotating);
canvas.on('object:scaling', onScaling);