How to add stroke to a Rectangle using FabricJS?

In this tutorial, we are going to learn how to add stroke 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.

Our rectangle object can be customized in various ways like changing its dimensions, adding a background colour or by changing the colour of the line drawn around the object. We can do this by using the stroke property.

Syntax

new fabric.Rect({ stroke : String }: 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 stroke is a property.

Options Keys

stroke − This property accepts a String and determines the colour of that object's border.

Example 1

Passing stroke as key with a hexadecimal value

Let’s see a code example to understand how our rectangle object appears when the stroke property is used. A hexadecimal colour code starts with a "#" followed by a six-digit number representing a colour. In this case we have used “#000080” which is the colour navy-blue.

<!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 stroke as key with a hexadecimal value</h2>
   <p>You can see the navy blue border around 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: 55,
         top: 70,
         width: 170,
         height: 70,
         fill: "#f4f0ec",
         stroke: "#000080",
         strokeWidth: 9,
      });

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

Example 2

Passing an rgba value to the stroke property

In this example, we will see how to assign an "rgba" value to the stroke property. We can use an RGBA value, instead of a hexadecimal colour code, which stands for: red, green, blue and alpha. The alpha parameter specifies the opacity of a colour. In this example, we have used the rgba value (0,0,128,0.8) which is the colour navy-blue with 0.8 opacity.

<!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 an rgba value to the stroke property</h2>
   <p>You can see the colour added using rgba to the rectangle's stroke</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: 55,
         top: 70,
         width: 170,
         height: 70,
         fill: "#f4f0ec",
         stroke: "rgba(0,0,128,0.8)",
         strokeWidth: 9,
      });

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