How to set the background colour of Line in FabricJS?

In this tutorial, we are going to learn how to set the background colour 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 backgroundColor property allows us to assign a colour to our object’s background.

Syntax

new fabric.Line( points: Array, { backgroundColor: 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 object of which backgroundColor is a property.

Options Keys

backgroundColor − This property accepts a String value which determines the background colour.

Passing backgroundColor property as key with a hexadecimal value

Example

Let’s see a code example to assign a background colour to our Line object using hexadecimal value of colour. In this example, we have used the hex colour code #ffe4e1 which is a very light shade of red.


<!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 backgroundColor property as key with a hexadecimal value</h2>
   <p>
      You can see the background colour is a very light shade of red
   </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,
         backgroundColor: "#ffe4e1"
      });

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

Passing backgroundColor property as key with a rgba value

Example

We can use a 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,206,209,0.4) which is the colour dark turquoise with 0.4 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 backgroundColor property as key with a rgba value</h2>
   <p>
      You can see the background colour is a dark turquoise colour with 0.4 opacity
   </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,
         backgroundColor: "rgba(0,206,209, 0.4)",
      });

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