Free Drawing Fabric.js

by Gopinath Kaliappan

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="canvas" width="400" height="400" class="canvas"></canvas>

<!--
<select name="colors" id="colorpick">
  <option value="#FFFF00">Yellow</option>
  <option value="#000000">Black</option>
  <option value="#FF0000">Red</option>
</select>
-->

<div id= "colorpicker">
<button id= "yellow" value= "FFFF00">yellow</button>
<button id= "black" value= "000000">black</button>
</div>

CSS

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

JavaScript

var canvas;

$(function () {
    canvas = window._canvas = new fabric.Canvas('canvas');
    canvas.backgroundColor = '#efefef';
    canvas.isDrawingMode= 1;
    canvas.freeDrawingBrush.color = "purple";
    canvas.freeDrawingBrush.width = 10;
    canvas.renderAll();

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