How to erase drawing in fabric.js?

Question

There is a canvas with an object. Need to drawing on object and also need eraser function. See the canvas screenshot: canvas where able drawing function

I see fabric.js hasn't erasing functionality. Is there any way to erase drawing with a erase brush?

Thanks

Answer 1

var toBase64Btn = document.getElementById("toBase64");
var canvas = document.getElementById("a");
var ctx = canvas.getContext("2d");
var drawing = false;
var drawingMode = "add";
var pencilWidth = 25;
var base64Str = "";
var fabCan = new fabric.Canvas("b");
var fillColor = "rgba(255,0,0,.5)";

var getMouseCoordinate = function (evt) {
 return {
   x : evt.pageX - this.offsetLeft,
    y : evt.pageY - this.offsetTop
  };
};

canvas.onmousedown = function (e) {
 if (drawing) return false;
  drawing = true;
  var mouse = getMouseCoordinate.call(this, e);
  
  ctx.globalCompositeOperation = drawingMode === "add" ? "xor" : "destination-out";
  ctx.fillStyle = drawingMode === "add" ? fillColor : "rgba(0,0,0,1)";
  
  ctx.beginPath();
  ctx.arc(mouse.x, mouse.y, pencilWidth, 0, 2*Math.PI);
  ctx.fill();
  ctx.closePath();
};

canvas.onmousemove = function (e) {
 if (!drawing) return false;
  var mouse = getMouseCoordinate.call(this, e);
  ctx.beginPath();
  ctx.arc(mouse.x, mouse.y, pencilWidth, 0, 2*Math.PI);
  ctx.fill();
  ctx.closePath();
};

canvas.onmouseup = function (e) {
 if (!drawing) return false;
  drawing = false;
};

toBase64Btn.onclick = function () {
 if (drawing) return false;
  
  var img = document.createElement("img");
  
  img.onload = function () {
  
   var group = [];
  
   ctx.clearRect(0,0,canvas.width, canvas.height);
    fabCan.add(new fabric.Image(this));
    
    fabCan.getObjects().forEach(function (obj) {
     obj.globalCompositeOperation = "xor";
      group.push(obj);
    });
    
    fabCan.clear().add(new fabric.Group(group)).renderAll();
  };
  
  img.src = canvas.toDataURL("image/png");
};

document.getElementById("erase").onchange = function () {
 drawingMode = this.checked ? "delete" : "add";
  console.warn(drawingMode);
};

fabCan.add(new fabric.Rect({
width: 100,
height: 100,
fill: fillColor
}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Erase: <input id="erase" type="checkbox">
<button id="toBase64" type="button">addToAOILayer</button><br/>
<canvas id="a" width="400" height="300"></canvas>
<canvas id="b" width="400" height="300"></canvas>

My code is here Html

Erase: <input id="erase" type="checkbox">
<button id="toBase64" type="button">addToAOILayer</button><br/>
<canvas id="a" width="400" height="300"></canvas>
<canvas id="b" width="400" height="300"></canvas>

Fabric.js

var toBase64Btn = document.getElementById("toBase64");
var canvas = document.getElementById("a");
var ctx = canvas.getContext("2d");
var drawing = false;
var drawingMode = "add";
var pencilWidth = 25;
var base64Str = "";
var fabCan = new fabric.Canvas("b");
var fillColor = "rgba(255,0,0,.5)";

var getMouseCoordinate = function (evt) {
    return {
    x : evt.pageX - this.offsetLeft,
    y : evt.pageY - this.offsetTop
  };
};

canvas.onmousedown = function (e) {
    if (drawing) return false;
  drawing = true;
  var mouse = getMouseCoordinate.call(this, e);

  ctx.globalCompositeOperation = drawingMode === "add" ? "xor" : "destination-out";
  ctx.fillStyle = drawingMode === "add" ? fillColor : "rgba(0,0,0,1)";

  ctx.beginPath();
  ctx.arc(mouse.x, mouse.y, pencilWidth, 0, 2*Math.PI);
  ctx.fill();
  ctx.closePath();
};

canvas.onmousemove = function (e) {
    if (!drawing) return false;
  var mouse = getMouseCoordinate.call(this, e);
  ctx.beginPath();
  ctx.arc(mouse.x, mouse.y, pencilWidth, 0, 2*Math.PI);
  ctx.fill();
  ctx.closePath();
};

canvas.onmouseup = function (e) {
    if (!drawing) return false;
  drawing = false;
};

toBase64Btn.onclick = function () {
    if (drawing) return false;

  var img = document.createElement("img");

  img.onload = function () {

    var group = [];

    ctx.clearRect(0,0,canvas.width, canvas.height);
    fabCan.add(new fabric.Image(this));

    fabCan.getObjects().forEach(function (obj) {
        obj.globalCompositeOperation = "xor";
      group.push(obj);
    });

    fabCan.clear().add(new fabric.Group(group)).renderAll();
  };

  img.src = canvas.toDataURL("image/png");
};

document.getElementById("erase").onchange = function () {
    drawingMode = this.checked ? "delete" : "add";
  console.warn(drawingMode);
};

fabCan.add(new fabric.Rect({
width: 100,
height: 100,
fill: fillColor
}));

I think it's help you