Border Radius Distortion on Rect Fabric Object When Decreasing Height

[yashChapaniOB]

Steps to Reproduce:

1. Create a Fabric.js Rectangle Object with a fixed width and height.
2. Apply a border-radius to the rectangle.
3. Decrease the height of the rectangle significantly (e.g., reduce it to a value much smaller than the width).
4. Observe the distorted appearance of the border-radius, which may look uneven or visually incorrect, similar to the issue shown in the image.

Expected Behavior:

The rectangle's border-radius should remain proportional and smoothly rounded, regardless of the height.

Actual Behavior:

The border-radius appears distorted and behaves unexpectedly when the height of the rectangle is decreased.

Code :

       const canvas = new fabric.Canvas('canvas');
        let canvasWidth = 640;
        let canvasHeight = 640;

        canvas.setWidth(canvasWidth);
        canvas.setHeight(canvasHeight);

      const rect = new fabric.Rect({
            left: 145, // Center the rectangle within the canvas
            top: 145,  // Center the rectangle within the canvas
            fill: 'blue',
            width: 350,
            height: 350,
            rx: 20, // Horizontal border radius
            ry: 20  // Vertical border radius
        });

        // Add rectangle to the canvas
        canvas.add(rect);

        canvas.renderAll();
        

Version Info :

• Node Version : 20.16.0
• Fabric.js : 6.4.0

[asturur]

This is because you are scaling a rectangle rather than changing the height.
Try to use a control to change the height rather than scaling and this will not happen.

[asturur]

Try to use the changeWidth control action to build your own changeHeight control rather than hacking it through the scale event.
The scaling event you wrote is not taking care of the postion, so yes, it will make the triangle slide because of strokeWidth not being 0 by default.

Also there is no really reason to downvote a response that express a solution rather than an opinion. Keep that in mind when you use the UI buttons.
That is not a button to say i solved/i didn't solved. See it more like a vote on a proposal

[yashChapaniOB]

Could you help me in the changeHeight control method?

[asturur]

Check how changeWidth is created, swap all the instances of width with heigth, create a changeHeight action.
Then assign that function to your rect control for mt and mb 'action' property.
Change your rect default controls to those new controls if you think in your application rects should behave in that way.

There is a method for rect that returns the controls, you can change that.

Check the customizing controls article:
https://fabricjs.com/docs/configuring-controls/

[Smrtnyk]

@yashChapaniOB did you manage to figure this out?
I also have this issue but it seems like it is a lot of ceremony to have this working
maybe fabric could have a demo for this example specifically

[asturur]

let me make a small demo. Yes is a lot of ceremony, because you have to write your own controls.
But is what you should be doing, not creating a library that supports all the possible combinations and permutations of ux options by default.