How to apply canvas filters with Svelte and Konva?

To apply filters you need to cache Konva.Node manually. You can do this initially in the onMount() method.

In case you dynamically change the style of the nodes you need to recache them manually for the changes to take effect on the canvas. This can be done by calling the cache() method on the affected nodes directly after a change (like in the demo) or in the afterUpdate() method to automatically recache the node on each state change in the component.

Instructions: hover over the rectangle to see the changes

Enjoying Konva? Please consider to support the project.