预保存编辑fabric.js PNG图像

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);
        }
    }