title: Fabric JS: Copy/paste object on mouse down
body: <p>I'm trying to create a block game where you select shapes from a menu and place them on the canvas.  There is a shape menu where you can drag the shapes onto the canvas. I would like for it to leave the main shape in the menu as it drags a clone onto the canvas. Is this possible? I have created a jsfiddle to help.</p>
  
  <p><a href="http://jsfiddle.net/ryanverdel/qy5p6a0g/"><strong>JSFIDDLE</strong></a></p>
  
  <pre><code>window.canvas = new fabric.Canvas('fabriccanvas');
  var edgedetection = 10; //pixels to snap
  canvas.selection = false;
  
  window.addEventListener('resize', resizeCanvas, false);
  
  function resizeCanvas() {
  canvas.setHeight(window.innerHeight);
  canvas.setWidth(window.innerWidth);
  canvas.renderAll();
  }
  
  // resize on init
  resizeCanvas();
  
  //Initialize Everything
  init();
  
  function init(top, left, width, height, fill) {
  
      var bg = new fabric.Rect({
      left: 0,
      top: 0,
      fill:  "#eee",
      width: window.innerWidth,
      height: 75,    
      lockRotation: true,
      maxHeight: document.getElementById("fabriccanvas").height,
      maxWidth: document.getElementById("fabriccanvas").width,
      selectable: false,
      });
  
      var squareBtn = new fabric.Rect({
      top: 6,
      left: 18,
      width: 40,
      height: 40,
      fill: '#af3',
      lockRotation: true,
      originX: 'left',
      originY: 'top',
      cornerSize: 15,
      hasRotatingPoint: false,
      perPixelTargetFind: true,
      });
  
      var circleBtn = new fabric.Circle({
      radius: 20,
      fill: '#f55',
      top: 6,
      left: 105,
      });
  
      var triangleBtn = new fabric.Triangle({
      width: 40, 
      height: 35, 
      fill: 'blue', 
      top: 10,
      left: 190,
      });
  
      var sqrText = new fabric.IText("Add Square", {
      fontFamily: 'Indie Flower',
      fontSize: 14,
      fontWeight: 'bold',
      left: 6,
      top: 50,
      selectable: false,
      });
  
      var cirText = new fabric.IText("Add Circle", {
      fontFamily: 'Indie Flower',
      fontSize: 14,
      fontWeight: 'bold',
      left: 95,
      top: 50,
      selectable: false,
      });
  
      var triText = new fabric.IText("Add Triangle", {
      fontFamily: 'Indie Flower',
      fontSize: 14,
      fontWeight: 'bold',
      left: 175,
      top: 50,
      selectable: false,
      });
  
      var shadow = {
      color: 'rgba(0,0,0,0.6)',
      blur: 3,    
      offsetX: 0,
      offsetY: 2,
      opacity: 0.6,
      fillShadow: true, 
      strokeShadow: true 
      }
  
      window.canvas.add(bg);
      bg.setShadow(shadow);
      window.canvas.add(sqrText);
      window.canvas.add(cirText);
      window.canvas.add(triText);
      window.canvas.add(squareBtn);
      window.canvas.add(circleBtn);
      window.canvas.add(triangleBtn);
  
      canvas.forEachObject(function (e) {
      e.hasControls = e.hasBorders = false; //remove borders/controls
  });
  
  this.canvas.on('object:moving', function (e) {
      var obj = e.target;
      obj.setCoords(); //Sets corner position coordinates based on current angle, width and height
      canvas.forEachObject(function (targ) {
          activeObject = canvas.getActiveObject();
  
  
          if (targ === activeObject) return;
  
  
          if (Math.abs(activeObject.oCoords.tr.x - targ.oCoords.tl.x) &lt; edgedetection) {
              activeObject.left = targ.left - activeObject.currentWidth;
  
          }
          if (Math.abs(activeObject.oCoords.tl.x - targ.oCoords.tr.x) &lt; edgedetection) {
              activeObject.left = targ.left + targ.currentWidth;
  
          }
          if (Math.abs(activeObject.oCoords.br.y - targ.oCoords.tr.y) &lt; edgedetection) {
              activeObject.top = targ.top - activeObject.currentHeight;
          }
          if (Math.abs(targ.oCoords.br.y - activeObject.oCoords.tr.y) &lt; edgedetection) {
              activeObject.top = targ.top + targ.currentHeight;
          }
          if (activeObject.intersectsWithObject(targ) &amp;&amp; targ.intersectsWithObject(activeObject)) {
  
          } else {
              targ.strokeWidth = 0;
              targ.stroke = false;
  
  
          }
          if (!activeObject.intersectsWithObject(targ)) {
              activeObject.strokeWidth = 0;
              activeObject.stroke = false;
              activeObject === targ
          }
      });
  });
  }
  </code></pre>