'How to toggle borders and controls of Fabric.js objects during image save?

I would like to create a fabric.js canvas, move some content around and then save the canvas as image. It has been done before (Fabric.js demo Objects Bounding Rectangles, save), but how do I update borders and controls to hidden during saving of the image?

I tried this, but it's not removing the border. And how do I re-instate it after save?

canvas.forEachObject(function (obj) {
    obj.hasBorders = false;
    obj.hasControls = false;
});
canvas.discardActiveObject();
canvas.renderAll();


Solution 1:[1]

I found out that the border is manually created by the demo, so I just had to remove that part:

canvas.on('after:render', function () {
    canvas.contextContainer.strokeStyle = '#555';

    canvas.forEachObject(function (obj) {
        var bound = obj.getBoundingRect();

        canvas.contextContainer.strokeRect(
            bound.left + 0.5,
            bound.top + 0.5,
            bound.width,
            bound.height
        );
    })
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 bluepuma77