A way of applying filters on entire layer/stage/canvas?

[usmanabdurrehman]

Hi, I am basically working on a Paint kind of application where I am able to draw rectangles, circles, free drawings, arrows, etc.

In addition to that we have the ability to apply filters on the entire canvas like brightness, blur, etc. One way is to apply a filter on the entire layer which would require me to call the cache method on the layer as well which would freeze the layer. After that, I was not able to do anything like drawing, resizing, dragging, etc. because the layer froze.

is there any way to do this with the ability to do everything else after applying the filter on the layer or I will have to select all the shapes etc. using stage.find and individually apply filters on them(which would allow me to drag, resize, etc.).

Codesandbox example: https://codesandbox.io/s/layer-filter-example-dyt6sm?file=/src/index.js In this example, the apply filter button on click calls the cache method on the layer after which we won't be able to drag the boxes.

[lavrton]

The fact that shapes are frozen on cache is intentional. This is how caching works.

You can filter them individually. Or optionally, you can apply a CSS filter to the canvas element of the layer. It will work fast, but it will not be included into export with node.toDataURL(). If you don't need to export with filters, it is a good approach. You can see how to implement it here: https://lavrton.com/case-study-image-labeling-for-machine-learning/

[usmanabdurrehman]

@lavrton Individual filtering it is then. Thanks for taking the time to answer. Also you alone are managing this huge library. How. Hats off to you.