How to add curves to a Rectangle using FabricJS?

In this tutorial, we are going to learn how to add curves to a Rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we will have to create an instance of fabric.Rect class and add it to the canvas.

We can customize a rectangle object by specifying its position, colour, opacity and dimension. However, we can also use properties like rx and ry which allow us to assign the horizontal and vertical border radius of a Rectangle.

Syntax

new fabric.Rect({ rx : Number, ry: Number }: Object)

Parameters

Options (optional) − This parameter is an Object which provides additional customizations to our rectangle. Using this parameter colour, cursor, stroke width and a lot of other properties can be changed related to the object of which rx and ry are properties.

Options Keys

rx − This property accepts a Number which determines the horizontal border radius.
ry − This property accepts a Number which determines the vertical border radius.

Example 1

Default appearance when rx and ry is not used

Let’s see a code example that will show the default appearance of our rectangle object when the rx and ry properties are not used.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Default appearance when rx and ry is not used</h2>
   <p>You can see that no curves have been added to the rectangle</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 70,
         top: 90,
         width: 170,
         height: 70,
         fill: "#ffb347",
         stroke: "#191970",
         strokeWidth: 5,
         padding: 7,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Example 2

Passing rx and ry properties as key

In this example, we are passing rx and ry properties the values 50 and 40, respectively. Due to this, our rectangle object will have a horizontal border radius of 50px and a vertical border radius of 40px.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Passing rx and ry properties as key</h2>
   <p>You can see that horizontal and vertical border radius have been added</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 70,
         top: 90,
         width: 170,
         height: 70,
         fill: "#ffb347",
         stroke: "#191970",
         strokeWidth: 5,
         padding: 7,
         rx: 50,
         ry: 40,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>