Search code examples
konvajsreact-konva

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.


Solution

  • 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.