FabricJS – How to include a Line object's default values in its serialization?

In this tutorial, we are going to learn how to include Line object’s default values in its serialization 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. Serialization is used in order to export canvas contents. In order to achieve this, we convert the object to JSON. The includeDefaultValues property allows us to include or omit the object’s default values when being serialized.

Syntax

new fabric.Line(points: Array ,{ includeDefaultValues: Boolean }: 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 includeDefaultValues is a property

Options Keys

includeDefaultValues − This property accepts a Boolean value. On passing a false value, the default values of the line object are not included in its serialization.

Using includeDefaultValues property and passing the value as "true"

Example

Let’s see a code example to see the logged output when the includeDefaultValues property is assigned a true value. In this case, we can see in our console that the object’s serialization includes default properties like "angle":0, "shadow":null, "opacity":1, "visible":true etc.


<!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>Using includeDefaultValues property and passing the value as "true"</h2>
   <p>
      You can open console from dev tools and see the default values of the serialized line object
   </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,
         includeDefaultValues: true,
      });

      // Add it to the canvas
      canvas.add(line);

      // Using JSON.stringify method to serialize the canvas
      console.log(JSON.stringify(canvas));
   </script>
</body>
</html>

Using includeDefaultValues property and passing the value as "false"

Example

In this example, we will see how by using the includeDefaultValues property and passing it a false value, we can omit the inclusion of the default values in the serialized line object.


<!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>Using includeDefaultValues property and passing the value as "false"</h2>
   <p>
      You can open console from dev tools and see that the default values have been omitted from the serialized line object
   </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,
         includeDefaultValues: false,
      });

      // Add it to the canvas
      canvas.add(line);

      // Using JSON.stringify method to serialize the canvas
      console.log(JSON.stringify(canvas));
   </script>
</body>
</html>