How to set the border color of a selection area on a canvas using FabricJS?

In this article, we are going to learn how to set the border color of a selection area on a canvas using FabricJS. A selection indicates whether a group selection should be enabled or not. FabricJS allows us to adjust the border color accordingly with the selectionBorderColor property.

Syntax

new fabric.Canvas(element: HTMLElement|String, { selectionBorderColor: String }: Object)

Parameters

element − This parameter is the <canvas> element itself which can be derived using document.getElementById() or the id of the <canvas> element itself. The FabricJS canvas will be initialized on this element.
options (optional) − This parameter is an Object which provides additional customizations to our canvas. Using this parameter, properties such as color, cursor, border width and a lot of other properties can be changed related to the canvas, of which selectionBorderColor is a property with which we can use to indicate the color of the border of the selection. The default value of the selectionBorderColor property is rgba(255,255,255,0.3).

Example 1

Using color name to set the selection area color

The selectionBorderColor property accepts a String which determines the color of the border of the selection. The color is usually darker than the color of the selection itself. Let's see a code example of how we can set the border color of a selection area in canvas using FabricJS.

<!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>Setting the border color of a selection area on a canvas</h2>
   <p>Select an area around the object. You will notice that the border color of the selection would be red in color. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionBorderColor: "green",
      });
      // Creating an instance of the fabric.Rect class
      var rect = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: "#006400",
         angle: 90,
      });
      // Adding it to the canvas
      canvas.add(rect);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Example 2

Using an rgba value for the selection area color

We can also use an "rgba" value where "a" stands for "alpha" that denotes the opacity. In this example, we have used maroon color which has an "rgba" value of (112,0,0) and 0.9 denotes the 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>Setting border colour of selection area using FabricJs</h2>
   <p>Select an area around the object to see the border color of the selection area. Here we have used "rgba" value to set the border color of the selection area.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionBorderColor: "rgba(112,0,0,0.9)",
      });
      // Creating an instance of the fabric.Rect class
      var rect = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: "#006400",
         angle: 90,
      });
      // Adding it to the canvas
      canvas.add(rect);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>