Fabric.js Rect Issue

by YashChapani

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Fabric.js Adjustable Dashed Line</title>
    <!-- Using Fabric.js version 6.4.0 -->
    <script src="https://cdn.jsdelivr.net/npm/fabric@6.4.0/dist/index.min.js"></script>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

</html>

JavaScript

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