'FabricJS - remove Stroke from image intended for saving

I have the following code for rounding corners of an image:

$scope.startRoundedCorners = function(e) {
    if ($rootScope.activePanel === 'round') return;

    $rootScope.openPanel('round', e);

    $scope.rect = new fabric.Rect({
        width: canvas.original.width,
        height: canvas.original.height,
        rx: $scope.radius,
        ry: $scope.radius,
        opacity: 1,
        fill: 'transparent',
        name: 'rounding-rect',
        stroke: '#fff',
        strokeDashArray: [5, 5],
        selectable: false,
        evented: false,
        ignore: true,
    });

    canvas.fabric.add($scope.rect);
    canvas.fabric.renderAll();
};

$scope.adjustPreview = function() {
    if ( ! $scope.rect) return;

    $scope.rect.set({
        rx: $scope.radius, ry: $scope.radius
    });
    canvas.fabric.renderAll();
};

$scope.apply = function() {
    $rootScope.editorCustomActions.roundCorners = angular.copy($scope.radius);

    canvas.fabric.remove($scope.rect);
    canvas.zoom(1);

    canvas.fabric.clipTo = function(ctx) {
        $scope.rect.render(ctx);
        canvas.fabric.clipTo = false;
    };
    var data = canvas.fabric.toDataURL(); //canvas.getDataURL();
    canvas.fabric.clear();
    $scope.cancel();

The problem is that the defined stroke is rendered also to the final image. I would like to remove the stroke before saving and the stroke have just for preview. I have tried to add $scope.rect.setStrokeWidth(0); at the beginning of the Apply function, but no effect.

Is there any way to remove all "user indicators" from the image and save only a pure image without all the additional strokes?

angularjs fabricjs

Solution 1:^[1]

Did you try the following:

canvas.fabric.deactivateAll().renderAll();

Solution 2:^[2]

Add line

$scope.rect.setStrokeWidth(0);

before line

var data = canvas.fabric.toDataURL();

This simply sets the stroke's width to 0 px right before saving the image.

Solution 3:^[3]

You could try:

this.fc.remove(...this.fc.getObjects('rect').filter((r) => r.name === 'rounding-rect'));

this.fc is the fabric.Canvas. Remove the specific rectangles before saving.

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	shershen
Solution 2	nfsmaniac
Solution 3	Garry Xiao

'FabricJS - remove Stroke from image intended for saving

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]