JSFiddle - React, Tailwind, and code Playground

by maxim_torba

HTML

<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="c"></canvas>
<button id="drawing_eraser_switcher">Draw</button>

JavaScript

let canvas = new fabric.Canvas(document.getElementById('c'), {
  width: window.innerWidth,
  height: window.innerHeight
});

let mode = 'erasing';
let drawingToEraserSwitcherBtn = document.getElementById('drawing_eraser_switcher');

canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 30;
canvas.freeDrawingBrush.color = 'black';

drawingToEraserSwitcherBtn.addEventListener('click', () => {
  if (mode === 'drawing') {
    mode = 'erasing';
    canvas.freeDrawingBrush.color = 'black';
    drawingToEraserSwitcherBtn.innerHTML = 'Draw';
    canvas.off('path:created', pathCreatedHandle);

  } else if (mode === 'erasing') {
    mode = 'drawing';
    canvas.freeDrawingBrush.color = 'white';
    drawingToEraserSwitcherBtn.innerHTML = 'Erase';
    canvas.off('path:created', pathCreatedHandle);
    canvas.on('path:created', pathCreatedHandle);
  }
});

function pathCreatedHandle(e) {
  e.path.globalCompositeOperation = 'destination-out';
  canvas.renderAll();
}