Possibility to add filter to entire canvas same as for individual objects about fabric.js

[ShaMan123]

Image filters take an image source, canvas is an image source.
So you can use canvas .getElement() as if it were an image and filter it.

[ShaMan123]

Try using the after:render canvas hook to do that
You can use the image filter logic

[shashank-brightness]

Can you please share how image filter thing would be using after:render? i am not familiar with that.

[shashank-brightness]

I am not getting your last comment and I searched but could not found the example so would you mind sharing the actual code please? I am looking for example using fabric js way in webgl.

[asturur]

To be clear your description is very confusing and is unclear what you want to achieve.
FabricJS does not support filters on objects different than images ( even if a pr for that exists and at some point it will be integrated ).

Is unclear if you want to apply that dynamically or just on some kind of export and what kind of performances do you expect.
For objects that mutate quickly uploading the pixels to the gpu is slow so performances aren't great.

The first thing you can do is clone your objects as image and filter then the images.

If you want to apply the filter to the canvas surface you have to do some kind of more elaborate hack involving a proxy fabricImage and an after:render event and some more stuff. Not going to explain that if i m not sure that is what you look for

[shashank-brightness]

@asturur
i have some sliders and i need to adjust brightness/contrast upon users changing that slider value but i don't want to export whole image via some function like toDataUrl() and apply filter on that exported image.

I have already read this thing but not sure if something better exists than this.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

I need filter for whole canvas. I can't better explain than this.

Also, let's say if object is something else(text) other than the image, it should be that only after applying filter and not image. So iterating over everything and adding them back as image and apply filter is too long and would not work as well.

Let me know if fabric js can change like that for whole canvas if something is available on fabric's native code.

[shashank-brightness]

@asturur
I need something like this which applies filter to everything below it (even to the background itself).

[asturur]

Provide me a jsfiddle or a codesandbox ( that works ) with a simple canvas and a rect and a text and i ll see if i can make an example