How to apply Blur to fabric object

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'
​

Continue reading...