JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>

JavaScript

var canvas = new fabric.Canvas("c",{backgroundColor : "#fff"});
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = "green";
canvas.freeDrawingBrush.width = 4;

//setTimeout(stop_drawing, 3000);
canvas.on('mouse:down', function(options) {
  start_drawing();
  console.log('click');
});
canvas.on('mouse:up', function(options) {
  stop_drawing();
  console.log('leave');
});
function stop_drawing() {
		canvas.isDrawingMode = false;
    /* canvas.freeDrawingBrush.onMouseUp(); */
}
function start_drawing() {
		canvas.isDrawingMode = true;
    /* canvas.freeDrawingBrush.onMouseUp(); */
}