Fabricjs Draw Tool

by Anand Rathod

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div id="bd-wrapper" ng-controller="CanvasControls">
    <canvas style="left: -300px; border: 2px solid; " height="600" width="632" id="c"></canvas>
    <li style="list-style-type: none; margin-top:10px;">
        <button id="drawing-mode" class="btn btn-info">Turn On Free Draw</button>
        <button id="select" class="btn btn-info">Turn On Selection Mode</button>
        <button id="grid" class="btn btn-info">Toggle Grid On/Off</button>
        <br>
        <button id="line" class="btn btn-info">Straight Line</button>
        <button id="circle" class="btn btn-info">Circle</button>
        <button id="squrect" class="btn btn-info">Square/Rectangle</button>
        <button id="arrow" class="btn btn-info">Arrow</button>
        <br><br>
        <button id="copy" class="btn btn-info">Copy Object</button>
        <button id="paste" class="btn btn-info">Paste Object</button>
        <button id="delete" class="btn btn-info">Delete Object(s)</button>
        <button id="clear-canvas" class="btn btn-info">Clear All</button>
        <button id="saveCanvas" class="btn btn-info">Save</button>
        <br>
        <div class="inputboxes" style="display: none;" id="drawing-mode-options">
            <label for="drawing-mode-selector">Brush Mode:</label>
            <select id="drawing-mode-selector">
    <option>Pencil</option>
    <option>Circle</option>
    <option>Spray</option>
    <option>Pattern</option>
    <option>hline</option>
    <option>vline</option>
    <option>square</option>
    <option>diamond</option>
    <option>texture</option>
  </select>
            <br>
            <label for="drawing-line-width">Line width:</label>
            <input type="range" value="30" min="0" max="150" id="drawing-line-width"><br>
            <label for="drawing-color">Line color:</label>
            <input...

CSS

#drawing-mode {
			  margin-bottom: 10px;
			  vertical-align: top;
			}
			#drawing-mode-options {
			  display: inline-block;
			  vertical-align: top;
			  margin-bottom: 10px;
			  margin-top: 10px;
			  background: #f5f2f0;
			  padding: 10px;
			}
			.info {
			  display: inline-block;
			  width: 25px;
			  background: #ffc;
			}
			#bd-wrapper {
			  min-width: 1500px;
			}

JavaScript

$(document).ready(function() {
    var canvas = new fabric.Canvas('c');
    canvas.isDrawingMode = false;
    canvas.selection = false;

    var drawingModeEl = document.getElementById('drawing-mode'),
        drawingOptionsEl = document.getElementById('drawing-mode-options'),
        drawingColorEl = document.getElementById('drawing-color'),
        drawingLineWidthEl = document.getElementById('drawing-line-width'),
        drawingShadowWidth = document.getElementById('drawing-shadow-width');

    var clearEl = document.getElementById('clear-canvas');
    clearEl.onclick = function() {
        canvas.clear()
    };

    var cSelection = document.getElementById('select');

    drawingModeEl.onclick = drawingModeElFunc;

    function drawingModeElFunc() {
        var val = canvas.isDrawingMode;
        val = !val;
        changeCanvasProperty(false, val);
        removeCanvasEvents();
        if (val) {
            drawingModeEl.innerHTML = 'Turn Off Free Draw';
            cSelection.innerHTML = 'Turn On Selection Mode';
            drawingOptionsEl.style.display = '';
        } else {
            drawingModeEl.innerHTML = 'Turn On Free Draw';
            cSelection.innerHTML = 'Turn Off Selection Mode';
            drawingOptionsEl.style.display = 'none';
        }
    };

    cSelection.onclick = function() {
        var val = canvas.selection,
            val2 = canvas.isDrawingMode;
        val = !val;
        changeCanvasProperty(val, false);
        removeCanvasEvents();
        if (canvas.selection) {
            changeSelectableStatus(true);
            cSelection.innerHTML = 'Turn Off Selection Mode';
            if (val2) {
                drawingModeEl.innerHTML = 'Turn On Free Draw';
                canvas.isDrawingMode = false;
                drawingOptionsEl.style.display = 'none';

            }
        } else {
            // drawingModeEl.innerHTML = 'Turn Off Free Draw';
            changeSelectableStatus(false);
           ...