Border Radius Distortion on Rect Fabric Object When Decreasing Height in Fabric.Js

Link To Reproduction


https://jsfiddle.net/YashChapani/g0xm9tqv/2/

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

Continue reading...