How to greyscale all canvas objects at once?

[enriqueerrando]

Hi,

I was wondering if there's a way to greyscale any object (eg: paths, svgs, shapes, etc) added to the canvas without having to manually iterate every object in the canvas with a loop or so. Iterating objects would eat up too many resorces since the user can add lots of them, even grouped with unlimmited subgroups.

The best thing I could think of was creating a rect as big as the canvas itself positioned on top of everyother object and with globalCompositeOperation set to 'saturation'. The cons here is that when u export the canvas with toDatalessJSON to download it as PNG with transparent background (canvas.background = 'transparent'), globalCompositeOperation still affect the canvas.background and so the final PNG will still have a white background.

Is there another way around it or something to fix my globalCompositeOperation issue?

Thanks in advance!!

[asturur]

Your use case is very particular.
I m not sure why you have to go through toDatalessJSON to obtain a PNG, but what you could do is just apply a filter to the the final png.
You produce a colored png then you load it as a fabric.Image and apply a saturation filter and make a png again

[asturur]

I m also not sure why a global composite operation should affect a background that is transparent.

[enriqueerrando]

Hi @asturur, thanks for the reply ;)

I'm building a designer tool similar to canva in concept, but with a different target and approach, and so I need the user to be able to export and reimport his design to continue editing it, so cannot use an image instead.

Haven't figured out yet the transparency issue..., but if u think that's not the expected behavior, I'll dig into my code in case there's something wrong.

If I find a solution, I'll come back to post it ;)

Thanks!