0

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'

Improve this question
5
  • 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. Commented Jul 11 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 FabricImage Commented Jul 11 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 is Commented Jul 11 at 15:04
  • Well, it still applies because looking at the API docs, filters are still only for images. Commented Jul 11 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. Commented Jul 11 at 15:24
Related questions
2
Fabric.js - canvas.toDatalessJSON not working as expected
5
Load from JSON in Fabric.js loading default properties
2
Canvas/Fabric.js .loadFromJSON() replaces entire canvas
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.