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