FabricJS – How to set the stroke colour of the controlling corners of a Line?

In this tutorial, we are going to learn about how to set the stroke colour of controlling corners of Line using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled.

We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. The cornerStrokeColor property allows us to set the stroke colour for controlling corners of an object.

Syntax

 new fabric.Line(points: Array , { cornerStrokeColor: String }: Object)

Parameters

points − This parameter accepts an Array of points which determines the (x1, y1) and (x2, y2) values, those being the x- and y-axis coordinates of the start and end of the line respectively.
options (optional) − This parameter is an Object which provides additional customizations to our object. Using this parameter origin, stroke width and a lot of other properties can be changed related to the line object of which cornerStrokeColor is a property.

Options Keys

cornerStrokeColor − The property accepts a String value which determines the stroke colour of controlling corners.

Example

Passing cornerStrokeColor as key with a Colour name as value

Let’s see a code example to change the stroke colour of controlling corners of an object. Here, we have passed the cornerStrokeColor the value as “red”. This will make sure that the stroke of our controlling corners appears to be red now.


<!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 cornerStrokeColor as key with a Colour name as value</h2>
   <p>
      You can select the line object to see the stroke colour of controlling corners
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         cornerStrokeColor: "red"
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Example

Disabling transparentCorners property to understand the difference between cornerColor and cornerStrokeColor

As we can see from this example, when transparentCorners is set to false, cornerStrokeColor only changes the stroke colour while cornerColor property determines the fill colour of the controlling corners itself.


<!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>Disabling transparentCorners property to understand the difference between cornerColor and cornerStrokeColor</h2>
   <p>
      You can select the line object to see the difference between cornerStrokeColor and cornerColor
   </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 Line object
      var line1 = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         transparentCorners: false,
         cornerColor: "red"
      });
      
      // Initiate another Line object
      var line2 = new fabric.Line([300, 100, 500, 40], {
         stroke: "green",
         strokeWidth: 20,
         transparentCorners: false,
         cornerStrokeColor: "red"
      });
      
      // Add them to the canvas
      canvas.add(line1);
      canvas.add(line2);
   </script>
</body>
</html>