AKA backdrop-filter: blur() on primitives like rect, cirle etc.

[interk0t]

hi all! maybe I haven’t read the documentation enough, but I haven’t found how to apply something like backdrop-filter: blur() to standard primitives like a circle or a rectangle, there is a blur filter but the primitives do not contain an array with filters, the task is simple, create a rectangle and do so that it would have the property of blurring everything that is behind it, thanks!

[asturur]

You can't do that, what you can do is blur the whole canvas as an image and use that as a pattern for the rectangle. so that it blur only a part of the canvas.
FIlters for objects are not supported yet, and when they do they won't include the background behind them anyway.

[interk0t]

ok, for example, I can blur the entire canvas, is it possible to cut out the part that will not blur, maybe there is some other trick to do this?

[asturur]

you can use a Rect class filled with a pattern that does not repeat, made with the entire canvas, then update path offsetX/offsetY when you move the rectangle around, so you can have a blurred canvas and a non blurred rect or vice versa

[interk0t]

here I update the clipPath by moving the base img itself

I did something similar, but the effect is not quite the same, because the edges of the image will not be blurred, as it should be in the second screenshot

[asturur]

The fact that the edge of the images are not blurred is because there is no space around the image to blur, you can either create a transparent padding around the image for the purpose of having that blur effect or i do not know. Even if we applied blur to the rect the issue would be the same

[interk0t]

Got it ,thanks!!