Fabric Eraser w/ Eraser2d

[mauricekindermann]

@shivasubramaniyam asked a quesiton on #8310

• The eraser library (@erase2d/fabric) works great - it clips objects individually instead of nuking the whole canvas bitmap - but its live preview composites three canvases together which creates a white halo while you draw
• We override _render on the brush instance to skip that compositing and just draw a normal brush trail instead
• We override _setBrushStyles to make that trail semi-transparent white so you can see where you're erasing without it being obnoxious
• On mouse-up, commit() runs untouched - that's where the real clipPath erasing happens, per-object, no halo
• Background color is safe because the library clips individual objects, it never touches backgroundColor

Of course you could set the brush to be the same color as the canvas i fyou like, but Ithink the UX is better having a before/after.

Here's the code:
https://codepen.io/goldencarers/pen/vEKreKG

[shivasubramaniyam]

Your explanation and code really cleared things up for me. I was stuck on this for a while, and your solution saved a lot of time.
Really appreciate the effort and support.

I forgot ask about the PR you made for editable tables features.
any update on that one??

happy coding..

[mauricekindermann]

No worries. Table extension is a big PR and needs a big review, maintainers will do that when they can. I added every bell and whistle and the latest version is very rich. It's given me some small insights into how GSheets was built.

[shivasubramaniyam]

Hi @mauricekindermann, I'm building a canvas editor using Fabric.js v6.9.1 and I've implemented a custom layer system using a layer property on each object (e.g. background: 0, image: 1, shape: 2, text: 3). I sort canvas._objects directly based on this property whenever a new object is added.
The issue is when the user manually reorders objects via toolbar buttons (bring forward, send back etc.), calling canvas.bringObjectToFront() works visually but gets overridden the next time sortLayers() runs, since it re-sorts by the layer property.
My current workaround is to update the layer value alongside every bringObjectToFront / sendObjectBackwards call to keep them in sync. But this feels brittle, especially for forward/backward where I'm just doing layer + 1 / layer - 1.
Questions:

Is directly mutating canvas._objects for sorting considered safe in v6, or is there a proper API for this?
Is there a recommended pattern for combining a fixed layer-type system (images always below text) with user-controlled z-index overrides?
Any known issues with selection:created not firing correctly after manually sorting _objects?

Happy to share the full code if helpful. Thanks!

export function applyZIndex(obj, direction, canvas) {
if (!obj || !canvas) return;

const objects = canvas._objects;
const idx = objects.indexOf(obj);

switch (direction) {
case "front":
obj.layer = 99; // Above everything
break;
case "back":
obj.layer = 0; // Behind everything
break;
case "forward":
// Swap with the object above it
if (idx < objects.length - 1) {
const above = objects[idx + 1];
const temp = obj.layer ?? 99;
obj.layer = above.layer ?? 99;
above.layer = temp;
}
break;
case "backward":
// Swap with the object below it
if (idx > 0) {
const below = objects[idx - 1];
const temp = obj.layer ?? 0;
obj.layer = below.layer ?? 0;
below.layer = temp;
}
break;
default:
console.log(
"choose default one, no functionality for the default one currently",
);
break;
}
sortLayers(canvas); // re-sort after layer change
canvas.requestRenderAll();
}

export const LAYER_ORDER = {
background: 0,
image: 1, // Images should be below shapes and text
shape: 2, // Shapes should be above images but below text
text: 3, // Text should be above images and shapes
table: 4, // above all elements
};

export const sortLayers = (canvas) => {
if (!canvas) return;

const objects = canvas.getObjects();
if (objects.length === 0) return;

const getLayerValue = (obj) => {
const layer = obj.layer;
if (typeof layer === "string") return LAYER_ORDER[layer] ?? 99;
if (typeof layer === "number") return layer;
return 99;
};

const activeObject = canvas.getActiveObject();

// In Fabric v6, _objects is the internal array — sort it directly
canvas._objects.sort((a, b) => getLayerValue(a) - getLayerValue(b));

// Restore active object
if (activeObject) {
canvas.setActiveObject(activeObject);
}

canvas.requestRenderAll();
};