I'm adding fabric rect like this:
import * as fabric from 'fabric';
addBlurBox() {
const rect = new fabric.Rect({
left: 100,
top: 100,
width: 200,
height: 150,
fill: 'rgba(255, 255, 255, 0.2)',
stroke: 'gray',
strokeWidth: 1,
selectable: true,
hasControls: true,
});
this.canvas.add(rect);
this.canvas.setActiveObject(rect);
}
It adds fine but then when I try to add Blur to it like so:
addBlurBox() {
const rect = new fabric.Rect({
left: 100,
top: 100,
width: 200,
height: 150,
fill: 'rgba(255, 255, 255, 0.2)',
stroke: 'gray',
strokeWidth: 1,
selectable: true,
hasControls: true,
});
rect.filters?.push(new fabric.FabricImage.filters.Blur({ blur: 0.3 })); <-- ERROR HERE
rect.applyFilters(); <-- ERROR HERE
this.canvas.add(rect);
this.canvas.setActiveObject(rect);
}
it throws an error for filters and applyFilters():
Property 'filters' does not exist on type 'Ellipse<{ left: number; top: number; rx: number; ry: number; strokeWidth: number; selectable: true; hasControls: true; originX: "center"; originY: "center"; }, SerializedEllipseProps, ObjectEvents>'
and for Blur:
Property 'Blur' does not exist on type 'typeof FabricImage'
Wolfgang Fahl
15.8k11 gold badges101 silver badges205 bronze badges
-
This question is similar to: Can I apply filters to Fabric.js primitives?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.Abdul Aziz Barkat– Abdul Aziz Barkat2025年07月11日 15:00:56 +00:00Commented Jul 11, 2025 at 15:00
-
Adding to above linked question (Note: I've never used the library you're using), although you can't use filters on objects other than images it should be possible to turn your objects into images by using toCanvasElement and passing that to the constructor for FabricImageAbdul Aziz Barkat– Abdul Aziz Barkat2025年07月11日 15:04:43 +00:00Commented Jul 11, 2025 at 15:04
-
@Abdul Aziz Barkat Its totally different because 9 years ago, the time when your suggested answer was posted, fabric wasnt v6. Now it isjpgarrett– jpgarrett2025年07月11日 15:04:52 +00:00Commented Jul 11, 2025 at 15:04
-
Well, it still applies because looking at the API docs, filters are still only for images.Abdul Aziz Barkat– Abdul Aziz Barkat2025年07月11日 15:06:01 +00:00Commented Jul 11, 2025 at 15:06
-
@Abdul Aziz Barkat yeah ok, then how to apply them to the image, cause this was this question about. Everything I try gives errors.jpgarrett– jpgarrett2025年07月11日 15:24:04 +00:00Commented Jul 11, 2025 at 15:24
lang-js