fabric.js polygon draw with mouse

by fahadnabbasi

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

CSS

canvas {
    border: 1px solid #999;
}
img {
    display: none;
}

JavaScript

/**
 * fabric.js template for bug reports
 *
 * Please update the name of the jsfiddle (see Fiddle Options).
 * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/all.js).
 */

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

// Do some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 7
});

// ADD YOUR CODE HERE
var mode = "add",
    currentShape;

canvas.observe("mouse:move", function (event) {
    var pos = canvas.getPointer(event.e);
    if (mode === "edit" && currentShape) {
        /*var points = currentShape.get("points");
        points[points.length - 1].x = pos.x;
        points[points.length - 1].y = pos.y;
        currentShape.set({
            points: points
        });*/
        
        var points = currentShape.get("points");
        points.pop();
        points.push({
            x: pos.x,
            y: pos.y
        });
        canvas.remove(currentShape);
        currentShape = new fabric.Polygon(points, {
        		fill: 'blue',
            opacity: 0.5,
            selectable: false
        });
        canvas.add(currentShape);
        
        canvas.renderAll();
    }
});

canvas.observe("mouse:down", function (event) {
    var pos = canvas.getPointer(event.e);

    if (mode === "add") {
        var polygon = new fabric.Polygon([{
            x: pos.x,
            y: pos.y
        }, {
            x: pos.x + 0.5,
            y: pos.y + 0.5
        }], {
            fill: 'blue',
            opacity: 0.5,
            selectable: false
        });
        currentShape = polygon;
        canvas.add(currentShape);
        mode = "edit";
    } else if (mode === "edit" && currentShape && currentShape.type === "polygon") {
        var points = currentShape.get("points");
        points.push({
            x:...