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?

[wangyong991]

I want to apply the following fragmentSource to all canvas to achieve more complex effects instead of using the effects in CanvasRenderingContext2D.filter. How should I do this?
precision highp float; uniform sampler2D uTexture; varying vec2 vTexCoord; void main() { vec4 color = texture2D(uTexture, vTexCoord); color.r = 0.0; color.g = 1.0; color.b = 1.0; gl_FragColor = color; }

[asturur]

We don't support filter outside the image yet. You could try to make the filter for the image, than add an overlay to the canvas that is an image that takes the element from the canvas lower element and see what happens.

Make the filter work on the image, then think of the rest.
There is a filter boilerplate to create new filters that you can use

[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