0

I want to use blur for rect elements (like filter: blur in css) in my React application. I tried to use it following konva tutorials but it doesn't work. It's possible? What am i doing wrong? This is my attempt at implementing this in my React application code sandbox.

Izzei -
  • 7
  • 2

1 Answers1

1

It is possible. To make it work, you need to make a bigger cache with offset attribute (https://konvajs.org/api/Konva.Node.html#cache):

ref.current.cache({ offset: 110 });

https://codesandbox.io/s/react-konva-rect-cache-p3pxl

Konva is calculating size of the cached canvas automatically. By default, for a rectangle shape, it will create a canvas with exactly the same size. Such cache will have only red pixels. So blur effect is not visible. Making cache bigger will add transparent pixels around the rectangle.

lavrton
  • 18,973
  • 4
  • 30
  • 63