Fabric JS: Copy/paste object on mouse down

Question

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.

JSFIDDLE

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) < edgedetection) {
            activeObject.left = targ.left - activeObject.currentWidth;

        }
        if (Math.abs(activeObject.oCoords.tl.x - targ.oCoords.tr.x) < edgedetection) {
            activeObject.left = targ.left + targ.currentWidth;

        }
        if (Math.abs(activeObject.oCoords.br.y - targ.oCoords.tr.y) < edgedetection) {
            activeObject.top = targ.top - activeObject.currentHeight;
        }
        if (Math.abs(targ.oCoords.br.y - activeObject.oCoords.tr.y) < edgedetection) {
            activeObject.top = targ.top + targ.currentHeight;
        }
        if (activeObject.intersectsWithObject(targ) && targ.intersectsWithObject(activeObject)) {

        } else {
            targ.strokeWidth = 0;
            targ.stroke = false;


        }
        if (!activeObject.intersectsWithObject(targ)) {
            activeObject.strokeWidth = 0;
            activeObject.stroke = false;
            activeObject === targ
        }
    });
});
}

Answer 1

See Jsfiddle here, I add the function to do this.

function draggable(object) {
    object.on('mousedown', function() {
        var temp = this.clone();
        temp.set({
            hasControls: false,
            hasBorders: false,
        });
        canvas.add(temp);
        draggable(temp);
    });
    object.on('mouseup', function() {
        // Remove an event handler
        this.off('mousedown');

        // Comment this will let the clone object able to be removed by drag it to menu bar
        // this.off('mouseup');

        // Remove the object if its position is in menu bar
        if(this.top<=75) {
            canvas.remove(this);
        }
    });
}

draggable(squareBtn);
draggable(circleBtn);
draggable(triangleBtn);