Free Drawing Fabric.js

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>


<button id= "drawMode" value= "true">Toggle Draw Mode</button>
<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>
-->

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;
    var circle = new fabric.Circle({ radius: 50, top: 50, left: 50, absolutePositioned:true,
      stroke: 'black',
  strokeWidth: 10,
  fill: 'rgba(0,0,0,0)'})
    var group = new fabric.Group([circle]);
		canvas.add(group)
    canvas.renderAll();

    canvas.on("path:created", (e) => {
      var path = e.path;
      path.set({selectable:false})
      path.clipPath = circle;
			group.addWithUpdate(path)

      // ... do something with your path
    });
document.getElementById('drawMode').addEventListener('click', function (e) {
        canvas.isDrawingMode = !canvas.isDrawingMode;
    });
});