Implementing an Eraser Tool with Fabric.js Including Restore Functionality
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 in ...
Posted on Wed, 05 Aug 2026 16:57:44 +0000 by not_skeletor
Implementing and Customizing the Circle Brush in Fabric.js
To utilize Fabric.js for free-hand drawing with a unique dotted effect, you must first activate the drawing mode on the canvas. This is achieved by setting the isDrawingMode property to true. The following code initializes the canvas and enables this mode.
const canvas = new fabric.Canvas('myCanvas', {
width: 800,
height: 500,
isDra ...
Posted on Tue, 04 Aug 2026 16:54:35 +0000 by dbrimlow
Freehand Rectangle Drawing with Fabric.js
Core Principles
To create rectangles via a "drag-to-select" method, focus on two key actions:
Capture start coordinates (mouse button pressed) and end coordinates (mouse button released).
After releasing the mouse, use the two coordinates to calculate the rectangle’s dimensions (width/height) and position.
Fabric.js provides event l ...
Posted on Thu, 14 May 2026 15:30:51 +0000 by aldoh