CODEWITHSUNDEEP
konvajsreact-konva
Izzei -
Izzei -

Reputation: 17

Is it possible to set blur for a rect element in konva.js?

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.

Upvotes: 1

Views: 928

Answers (1)

lavrton
lavrton

Reputation: 20373

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.

Upvotes: 1

Related Questions