Clearing a Canvas in Fabric.js

In Fabric.js, clearing the canvas is straightforward using the built-in clear() method.

Native Canvas Clearing

When working with the native HTML5 Canvas API, clearing the canvas requires explicitly setting the drawing area to transparent. This typically involves calling clearRect() with the full dimensions of the canvas:

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

<script>
  const cnv = document.getElementById('c');
  const ctx = cnv.getContext('2d');

  ctx.fillStyle = 'pink';
  ctx.fillRect(50, 50, 200, 200);

  ctx.clearRect(0, 0, cnv.width, cnv.height);
</script>

While effective, this approach demands knowledge of canvas dimensions and can be less intuitive for beginners.

Fabric.js Clear Method

Fabric.js simplifies the process by providing a clear() method that removes all objects from the canvas without needing to manage dimensions manually.

Here’s an example where a triangle is added to the canvas, and then cleared upon clicking a button:

<button onclick="handleClear()">Clear Canvas</button>
<canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
  // Initialize canvas
  let canvas = new fabric.Canvas('canvasBox');

  // Create a triangle
  const triangle = new fabric.Triangle({
    top: 100,
    left: 50,
    width: 80,
    height: 100,
    fill: 'blue',
  });

  // Add triangle to canvas
  canvas.add(triangle);

  // Clear canvas
  function handleClear() {
    canvas.clear();
  }
</script>

The clear() method removes all element from the canvas but does not destroy the canvas instanec itself, preserving its functionality like selection tools.

Disposing of Fabric Instances

To completely remove a Fabric.js canvas instance, use the dispose() method. This method cleans up event listeners and releases associated resources.

<button onclick="handleDispose()">Dispose Canvas</button>
<canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
  // Initialize canvas
  let canvas = new fabric.Canvas('canvasBox');

  // Create a triangle
  const triangle = new fabric.Triangle({
    top: 100,
    left: 50,
    width: 80,
    height: 100,
    fill: 'blue',
  });

  // Add triangle to canvas
  canvas.add(triangle);

  // Dispose canvas
  function handleDispose() {
    canvas.dispose();
  }
</script>

After disposal, the canvas element becomes available for reuse or removal, freeing it from Fabric.js control.

Removing the Canvas Element

If you want to fully remove both the Fabric.js instance and the underlying canvas element, combine dispose() with remove():

<button onclick="removeCanvas()">Remove Canvas</button>
<canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
  // Initialize canvas
  let canvas = new fabric.Canvas('canvasBox');

  // Create a triangle
  const triangle = new fabric.Triangle({
    top: 100,
    left: 50,
    width: 80,
    height: 100,
    fill: 'blue',
  });

  // Add triangle to canvas
  canvas.add(triangle);

  // Remove canvas element
  function removeCanvas() {
    const element = canvas.getElement();
    canvas.dispose();
    element.remove();
  }
</script>

This ensures that the canvas element is removed from the DOM and no longer managed by Fabric.js.