jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>
<button onclick="canvas.isDrawingMode = (! canvas.isDrawingMode)">
toggle drawmode
</button>

<canvas id="cool"></canvas>

JavaScript

canvas = new fabric.Canvas('cool', {
        width: 500,
        height: 500,
        isDrawingMode: true
});

canvas.freeDrawingBrush.color = '#00FF00'
canvas.freeDrawingBrush.width = 10

var img_src = 'http://i.imgur.com/tENv1w4.jpg';
var img = new Image();
img.src = img_src;
img.crossOrigin = "anonymous";  // important - set crossOrigin before src!
img.onload = function(){
	 canvas.setBackgroundImage(new fabric.Image(img, {
	    width: canvas.width,
  	  height: canvas.height,
	  	originX: 'left',
	  	originY: 'top'
	  }), canvas.renderAll.bind(canvas));
};



canvas.on('path:created', function(el){
	console.log(el.path.toClipPathSVG())
	var path = el.path.path
  var points = []
  for (var i = 0; i < path.length; i++){
    point = {
      x: Math.round(path[i][1]),
      y: Math.round(path[i][2])
    }
    points.push(point)
  }

  shape = new fabric.Polygon(points, {
      stroke: 'red',
      opacity: 0.5,
      strokeWidth: 1,
      description: 'aaa',
      fill: 'transparent',
  });
  canvas.add(shape)
})