Draw on canvas

by Luiz Silva

HTML

<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<label class="btn btn-primary" id="btnRoof">PressTo Draw! And to stop</label>
<canvas id="canvas" class="canvas" width="500" height="500"></canvas>

CSS

.canvas {
    border: 1px solid black;
}

JavaScript

var roofPoints = [];
    var lines = [];
    var lineCounter = 0;
    var drawingObject = {};
    drawingObject.type = "";
    drawingObject.background = "";
    drawingObject.border = "";

    function Point(x, y) {
        this.x = x;
        this.y = y;
    }

    $("#btnRoof").click(function () {
        if (drawingObject.type == "roof") {
            drawingObject.type = "";
            canvas.remove(lines[lineCounter - 1]);
            var roof = makeRoof(roofPoints);
            canvas.add(roof);
            canvas.renderAll();
        } else {
            drawingObject.type = "roof"; // roof type
            roofPoints = [];
            lines = [];
            lineCounter = 0;            
        }
    });


    // canvas Drawing
    var canvas = new fabric.Canvas('canvas');
    var x = 0;
    var y = 0;
    canvas.on('mouse:down', function (options) {
        if (drawingObject.type == "roof") {
            canvas.selection = false;
            setStartingPoint(options); // set x,y
            roofPoints.push(new Point(x, y));
            var points = [x, y, x, y];
            lines.push(new fabric.Line(points, {
                strokeWidth: 1,
                selectable: false,
                stroke: 'red'
            }).setOriginX(x).setOriginY(y));
            canvas.add(lines[lineCounter]);
            lineCounter++;
            canvas.on('mouse:up', function (options) {
                canvas.selection = true;
            });
        }
    });
    canvas.on('mouse:move', function (options) {
        if (lines[0] !== null && drawingObject.type == "roof") {
            setStartingPoint(options);
            lines[lineCounter - 1].set({
                x2: x,
                y2: y
            });
            canvas.renderAll();
        }
    });

    function setStartingPoint(options) {
        var offset = $('#canvas').offset();
        x = options.e.pageX - offset.left;
        y = options.e.pageY - offset.top;
    }

    function...