Possibility to add filter to entire canvas same as for individual objects

[shashank-brightness]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have searched and referenced existing issues, feature requests and discussions
• I am filing a FEATURE request.

Description

When we need to add filter to entire canvas, nothing is currently available to do this. I need the same thing how we add to objects but for entire canvas.

const activeObj = canvas.getActiveObject();
const objectBrightnessFilter = new fabric.Image.filters.Brightness({
    brightness: 0.5
});
activeObj.filters.push(objectBrightnessFilter)
activeObj.applyFilters();
canvas.renderAll();

Above code adds brightness filter but for object only. We may be iterate over all objects but that does not look the proper way to do it. Also, getting whole image first via toDataUrl and applying filter to that image is not viable solution.

Current State

Searched but could not found any solution to this issue.

Additional Context

No response

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

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

[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

[shashank-brightness]

@asturur
I have created here.
https://jsfiddle.net/30anyoqc/

[ShaMan123]

If applying a filter to all your canvas is good enough then this is enough

      canvas.on('before:render', ({
        ctx
      }) => {
        ctx.filter = 'blur(5px)'
      })

https://jsfiddle.net/tbp7gzru/

If not you will need to use layering, that is possible but you will need to impl on top of fabric.
I thought you wanted to use fabric's image filters as @asturur explained

[shashank-brightness]

Thanks for the code, I will use like that, however i would be interested know how it would be to use layering on top of fabric. you mean apply effect on each individual layer and also to background or something like that i guess?

Also, if i need to add both brightness and contrast to server via canvas.toJSON, are these things saved auto in json?

[ShaMan123]

Thanks for the code, I will use like that, however i would be interested know how it would be to use layering on top of fabric. you mean apply effect on each individual layer and also to background or something like that i guess?

yes, that requires you to rebuild rendering
might be easier to use a rendering engine such as pixi.js or rive

Also, if i need to add both brightness and contrast to server via canvas.toJSON, are these things saved auto in json?

no