How to include Text object's default values in its serialization using FabricJS?

In this tutorial, we are going to learn how to include Text object’s default values in its serialization using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but we can also add additional functionalities. Serialization is used in order to export canvas contents. In order to achieve this we use toObject() and toJSON() methods. The includeDefaultValues property allows us to include or omit the object’s default values when being serialized.

Syntax

new fabric.Text(text: String , { includeDefaultValues: Boolean }: Object)

Parameters

text − This parameter accepts a String which is the text string that we want to display.
options (optional) − This parameter is an Object which provides additional customizations to our text. Using this parameter colour, cursor, border 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 text object are not included in its serialization.

Example 1

Using includeDefaultValues property and passing the value as “true”

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, “fontWeight”:“normal”, “underline”:false, “overline”:false, “fontSize”:40 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 that the default values of the serialized text 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 text object
      var text = new fabric.Text("Add sample
text here", {
         left: 60,
         top: 50,
         width: 300,
         fill: "green",
         textAlign: "center",
         includeDefaultValues: true,
      });

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

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

Example 2

Using includeDefaultValues property and passing the value as “false”

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 text 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 text 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 text object
      var text = new fabric.Text("Add sample
text here", {
         left: 60,
         top: 50,
         width: 300,
         fill: "green",
         textAlign: "center",
         includeDefaultValues: false,
      });

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