How to serialize a Polyline object into JSON in FabricJS?

FabricJS Javascript Library Front End Technology

A polyline object can be characterised by a set of connected straight-line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity, etc.

Serialization means converting the canvas into savable data which can be converted back into the canvas later. This data can be an object or JSON so that it can be stored on servers. We will use the toJSON() method to convert the canvas with Polyline object into JSON.

Syntax

toJSON(propertiesToInclude: Array): Object

Parameters

propertiesToInclude − This parameter accepts an Array which contains any properties we might want to additionally include in the output. This parameter is optional.

Example 1: Using the toJSON Method

Let’s see a code example to see the logged output when the toJSON method is used. In this case, a JSON representation of the Polyline instance will be returned.

<!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 the toJSON method</h2>
   <p> You can open console from dev tools and see that the logged output contains the JSON representation of the Polyline instance </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 Polyline instance
      var polyLine = new fabric.Polyline([
         { x: 500, y: 20 },
         { x: 550, y: 60 },
         { x: 550, y: 200 },
         { x: 350, y: 100 },
         { x: 350, y: 60 },
      ], {
         stroke: "orange",
         fill: "white",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(polyLine);
      
      // Using the toJSON method
      console.log("JSON representation of the Polyline instance is: ", polyLine.toJSON());
   </script>
</body>
</html>

Example 2: Using toJSON Method to Add Additional Properties

Let’s see a code example to see how we can include additional properties by using the toJSON method. In this case, we have added a custom property called “name”. We can pass the specific property to the fabric.Polyline instance as second argument in options object and pass the same key to the toJSON method.

<!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 toJSON method to add additional properties</h2>
   <p> You can open console from dev tools and see that the logged output contains JSON with the added property called name </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 Polyline object with name key

      // passed in options object
      var polyLine = new fabric.Polyline([
         { x: 500, y: 20 },
         { x: 550, y: 60 },
         { x: 550, y: 200 },
         { x: 350, y: 100 },
         { x: 350, y: 60 },
      ], {
         stroke: "orange",
         fill: "white",
         strokeWidth: 5,
         name: "Polyline instance",
      });

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

      // Using the toJSON method
      console.log(
         "JSON representation of the Polyline instance is: ", polyLine.toJSON(["name"])
      );
   </script>
</body>
</html>