fabric.js freeDrawing

by Gisele Lima

HTML

<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<canvas id="canvas" width="600" height="600" class="canvas"></canvas>
<button id="freedraw" class="btn btn-info">Enter drawing mode</button>
<input type="color" id="colorpicker" />

CSS

.canvas-wrapper {
    margin-botom: 30px;
}

JavaScript

var canvas;

$(function () {
    canvas = window._canvas = new fabric.Canvas('canvas');
    canvas.backgroundColor = '#efefef';
    
    canvas.renderAll();

    document.getElementById('freedraw').addEventListener('click', function () {
        canvas.isDrawingMode = !canvas.isDrawingMode;
        canvas.freeDrawingBrush.width = 15;
    });

    document.getElementById('colorpicker').addEventListener('change', function (e) {
        console.log(e.target.value);
        canvas.freeDrawingBrush.color = e.target.value;
    });
});