Pre-save edit fabric.js PNG image

Question

I am currently developping an interface for a client, that will allow to customer to create PNG picture for further use:

I have in my fabric.js canvas what i call overlays (the three white squares) that could be randomly positioned depending on the template that is used.

If the user choose to enable a new option called "front overlays" everything over those squares will be under them (I create white Rect in those overlays, and position them at the top of the canvas).

Before, once editing is over, I could just save the PNG with a "FileSaver.js" library, because the inside of those overlays was transparent. And now, if "front overlays" is enabled, this space is white.

I now need to empty those overlays on the go before saving it. Is it possible with fabric.js ? Or with a JS library ?

Answer 1

The answer was way easier that I thought:

if my new option is enabled, I loop around my overlays, and clear them with "clearRect", that is working because fabric.js use canvas... :)

    if(frontOverlay) {
        let c = document.getElementById("canvas");
        let ctx = c.getContext("2d");

        for (let i = 0, len = overlaySvg.length; i < len; i++) {
            let stroke = overlaySvg[i].strokeWidth;
            ctx.clearRect(overlaySvg[i].left+stroke, overlaySvg[i].top+stroke, overlaySvg[i].width-stroke, overlaySvg[i].height-stroke);
        }
    }