Setting Up Fabric.js with Eraser Support

The standard Fabric.js package doesn't include eraser functionality out of the box. To use this feature, you'll need either a custom build from the FabricJS builder or the fabric-with-erasing npm package.

Using npm

npm install fabric-with-erasing

This package bundles Fabric.js 5.2 with eraser support included. No seperate Fabric.js installation is required.

Core Implemantation

Enabling Eraser Mode

To activate the eraser, configure the canvas with drawing mode enabled and assign an EraserBrush instance:

const canvas = new fabric.Canvas('canvas')

canvas.isDrawingMode = true
canvas.freeDrawingBrush = new fabric.EraserBrush(canvas)
canvas.freeDrawingBrush.width = 10

Protecting Objects from Erasure

Individual objects can be marked as protected using the erasable property:

const protectedRect = new fabric.Rect({
  top: 50,
  left: 50,
  width: 80,
  height: 80,
  fill: '#4b5cc4',
  erasable: false  // This rectangle cannot be erased
})

const erasableRect = new fabric.Rect({
  top: 50,
  left: 180,
  width: 80,
  height: 80,
  fill: '#f47983'
  // erasable defaults to true
})

canvas.add(protectedRect, erasableRect)

Switching Between Modes

A practical implementation that toggles between selection and eraser modes:

<div style="margin-bottom: 10px;">
  <button onclick="setMode('select')">Select Mode</button>
  <button onclick="setMode('erase')">Erase Mode</button>
  <button onclick="setMode('restore')">Restore Mode</button>
</div>

<canvas id="drawingCanvas" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

<script src="fabric-with-erasing.js"></script>
<script>
  const canvas = new fabric.Canvas('drawingCanvas')

  canvas.add(new fabric.Rect({
    top: 60,
    left: 60,
    width: 60,
    height: 60,
    fill: "#4b5cc4",
    opacity: 0.8,
    erasable: false
  }))

  canvas.add(new fabric.Rect({
    top: 60,
    left: 180,
    width: 60,
    height: 60,
    fill: "#f47983",
    opacity: 0.8
  }))

  function setMode(mode) {
    switch (mode) {
      case 'select':
        canvas.isDrawingMode = false
        break
      case 'erase':
        canvas.isDrawingMode = true
        canvas.freeDrawingBrush = new fabric.EraserBrush(canvas)
        canvas.freeDrawingBrush.width = 10
        canvas.freeDrawingBrush.inverted = false
        break
      case 'restore':
        canvas.isDrawingMode = true
        canvas.freeDrawingBrush = new fabric.EraserBrush(canvas)
        canvas.freeDrawingBrush.width = 10
        canvas.freeDrawingBrush.inverted = true
        break
    }
  }
</script>

Restoring Erased Content

The eraser brush includes an inverted property that reverses its behavior. Setting this to true converts the brush into a restoration tool that brings back previously erased areas:

canvas.freeDrawingBrush.inverted = true

Key Concepts

Summary

The eraser functionality requires a custom Fabric.js build. Objects can be protected by setting erasable: false, and the inverted property on the eraser brush enables restoration of previous erased regions.