JSFiddle - React, Tailwind, and code Playground

by Subhasish2015

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<h1>Copy canvas </h1>

<canvas id="c" width=500 height=500></canvas>
<button id="copy" value="">copy canvas</button>
<canvas id="c1" width=500 height=500></canvas>

JavaScript

var canvas = new fabric.Canvas('c');
  var minX, minY, maxX, maxY;
  canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
  fabric.Image.fromURL('http://www.beatnyama.com/wp-content/uploads/2015/05/assets.jpg', function(img){
      img.evented=false;
      img.selectable=false;
      canvas.add(img);
      minX = img.oCoords.tl.x;
      maxX = img.oCoords.br.x;
      minY = img.oCoords.tl.y;
      maxY = img.oCoords.br.y;
      canvas.sendToBack(img);
  });
canvas.observe("object:selected", function(e){
    e.target.lockMovementX = false;
    e.target.lockMovementY = false;
});

canvas.observe("object:moving", function(e){
      var obj = e.target;
      obj.setCoords();
      var b = obj.getBoundingRect();
      if (!(b.left >= minX && maxX >= b.left + b.width)) {
          obj.left = obj.lastLeft;
      } else {
          obj.lastLeft = obj.left;
      }
      if (!(maxY >= b.top + b.height && b.top >= minY)) {
          obj.top = obj.lastTop;
      } else {
          obj.lastTop = obj.top;
      }
});