Duplicate object drawn when dragging the existing object

Question

I am working on the project for creating shapes using fabric js. I can able to create all shapes as per the fabric js documentation.

I have a problem where a shape is creating below to the shape which the user dragging.

Please find the fiddle below for better understanding,

$(document).ready(function() {
    //Getting the canvas
    var canvas1 = new fabric.Canvas("canvas2");
    var freeDrawing = true;
    var divPos = {};
    var offset = $("#canvas2").offset();
    $(document).mousemove(function(e) {
        divPos = {
            left: e.pageX - offset.left,
            top: e.pageY - offset.top
        };
    });
    $('#2').click(function() {

        console.log("Button 2 cilcked");

        //Declaring the variables
        var isMouseDown = false;
        var refRect;

        //Setting the mouse events
        canvas1.on('mouse:down', function(event) {
            //Defining the procedure
            isMouseDown = true;
            //Getting yhe mouse Co-ordinates
            //Creating the rectangle object
            if (freeDrawing) {
                var rect = new fabric.Rect({
                    left: divPos.left,
                    top: divPos.top,
                    width: 0,
                    height: 0,
                    stroke: 'red',
                    strokeWidth: 3,
                    fill: ''
                });
                canvas1.add(rect);
                refRect = rect; //**Reference of rectangle object
            }

        });

        canvas1.on('mouse:move', function(event) {
            // Defining the procedure

            if (!isMouseDown) {
                return;
            }
            //Getting yhe mouse Co-ordinates
            if (freeDrawing) {
                var posX = divPos.left;
                var posY = divPos.top;

                refRect.setWidth(Math.abs((posX - refRect.get('left'))));
                refRect.setHeight(Math.abs((posY - refRect.get('top'))));
                canvas1.renderAll();
            }

        });


        canvas1.on('mouse:up', function() {
            //alert("mouse up!");
            canvas1.add(refRect);
            isMouseDown = false;
            canvas1.add();
            //freeDrawing=false;  // **Disables line drawing
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas2" width=500 height=500 style="height:500px;width:500px;"></canvas>
<img width=500 height=500 alt="" id="scream" src="canvas.png" style="display:none;"/>
<div style="position: relative; width: 1300px; height:30px; border: 2px solid black; margin-top: 5px">
<input type="button" id="2" value="rectangle">

Here is fiddle

Answer 1

$(document).ready(function() {
    //Getting the canvas
    var canvas = new fabric.Canvas("canvas");
    var rect, isMouseDown = false;
    $('#selection').click(function() {
        canvas.selection = true;
        changeStatus(true);
        //remove mouse event
        canvas.off('mouse:down', onMouseDown);
        canvas.off('mouse:move', onMouseMove);
        canvas.off('mouse:up', onMouseUp);
    })

    function changeStatus(value) {
        canvas.forEachObject(function(obj) {
            obj.selectable = value;
        })
        canvas.renderAll();
    }
    $('#rectangle').click(function() {
        canvas.selection = false;
        changeStatus(false);
        //register mouse event
        canvas.on('mouse:down', onMouseDown);
        canvas.on('mouse:move', onMouseMove);
        canvas.on('mouse:up', onMouseUp);
    });

    function onMouseDown(event) {
        //Defining the procedure
        isMouseDown = true;
        var pointer = canvas.getPointer(event.e);
        //Creating the rectangle object
        rect = new fabric.Rect({
            left: pointer.x,
            top: pointer.y,
            width: 0,
            height: 0,
            stroke: 'red',
            strokeWidth: 3,
            selectable: false,
            fill: ''
        });
        canvas.add(rect);
    }

    function onMouseMove(event) {
        // Defining the procedure
        if (!isMouseDown) {
            return;
        }
        var pointer = canvas.getPointer(event.e);
        rect.setWidth(Math.abs((pointer.x - rect.get('left'))));
        rect.setHeight(Math.abs((pointer.y - rect.get('top'))));
        canvas.renderAll();
    }

    function onMouseUp() {
        //alert("mouse up!");
        rect.setCoords();
        isMouseDown = false;
    }
});

canvas {
  border: 2px dotted green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js" charset="utf-8"></script>
<canvas id="canvas" width=400 height=400 style="height:500px;width:500px;"></canvas>
<img width=500 height=500 alt="" id="scream" src="canvas.png" style="display:none;" />
<br>
<input type="button" id="rectangle" value="rectangle">
<input type="button" id="selection" value="selection">

Create 2 buttons , 1>selection , 2> rectangle

On selection> remove all your mouse event,and change selectable status of object to true,

and on rectangle> add mouse event to canvas,and change all object selectable status to false.