Cloning obj fabric

Cloning objects from one canvas to another messes up the scaling controls on the target canvas(canvas2). Also enables transparentCorners on source canvas(canvas1).

by Avichal Solanki

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/fabric.min.js"></script>
<html>

  <body>
    <div style="float:left">
      <canvas id="canvas1" width="400" height="200" style="padding: 3px; border: solid;">
      </canvas>
      <br>
      <canvas id="canvas2" width="400" height="200" style="padding: 3px; border: solid;">
      </canvas>
      <br>
      <button type="button" onclick="makeRect()">Make Rectangle</button>
      <br>
      <button type="button" onclick="cloneRect()">Clone Rectangle</button>
      <br>
      <button type="button" onclick="moveRect()">Move Rectangle</button>
    </div>
  </body>

</html>

JavaScript

;var canvasEl1 = document.getElementById('canvas1');
var ctx1 = canvasEl1.getContext('2d');
var canvas1 = new fabric.Canvas('canvas1');

var canvasEl2 = document.getElementById('canvas2');
var ctxPrint = canvasEl2.getContext('2d');
var canvas2 = new fabric.Canvas('canvas2');

function selectAllObjects(desiredCanvas) {
  desiredCanvas.discardActiveObject();
  var sel = new fabric.ActiveSelection(desiredCanvas.getObjects(), {
    canvas: desiredCanvas,
  });
  desiredCanvas.setActiveObject(sel);
  desiredCanvas.requestRenderAll();
}

function makeRect() {
  var rect = new fabric.Rect({
    left: 10,
    top: 10,
    fill: 'white',
    width: 50,
    height: 50,
    stroke: 'red',
    strokeWidth: 5,
    transparentCorners: false
  });

  canvas1.add(rect);
}

function cloneRect() {
  
  selectAllObjects(canvas1);
  
  var clone_rect = canvas1.getActiveObject();
  canvas1.discardActiveObject();
  clone_rect.clone(function (cloned) {
            var clone_temp = cloned;
            clone_temp.set({left:cloned.left + 10, top:cloned.top + 10});
            canvas2.add(clone_temp);
        });
  canvas2.renderAll();
  canvas1.renderAll();
}

function moveRect(){
	selectALlObjects(canvas2);
  cloned_rect = canvas2.getActiveObject();
  cloned_rect.set({left: 100, top: 100});
  canvas2.renderAll();
}