Fabric.js Polyline lockRotation Property

Last Updated : 22 Jan, 2021

The canvas Polyline means the Polyline is movable and can be stretched according to requirements. Further, the Polyline can be customized when it comes to initial stroke color, shape, fill color or stroke width with the help of a JavaScript library called FabricJS.

Syntax:

var polyline = new fabric.Polyline(Points, {  
     lockRotation: boolean
});

Parameters: This property accepts a single parameter as mentioned above and described below:

lockRotation: It specifies whether to enable rotation or not.

The below example illustrates the lockRotation property in Fabric.js. After importing the library, we will create a canvas block in the body tag that will contain the Polyline. After this, we will initialize instances of Canvas and Polyline provided by FabricJS and lock the rotation of the canvas Polyline using lockRotation property and render the Polyline on the Canvas.

Example:

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <!-- Loading the FabricJS library -->
  <script 
  src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> 
  </script> 
</head> 
<body> 
  <div style="text-align: center;width: 600px;"> 
    <h1 style="color: green;"> 
      GeeksforGeeks 
    </h1> 
    <b>Fabric.js | Polyline lockRotation Property</b> 
  </div> 
  <canvas id="canvas" width="600" height="200" 
  style="border:1px solid #000000;"> 
  </canvas> 
  <script> 
  
    // Initiate a Canvas instance  
    var canvas = new fabric.Canvas("canvas"); 
  
    // Initiate a polyline instance  
    var polyline = new fabric.Polyline([ 
      { 
        x: 200, 
        y: 10 
      }, 
      { 
        x: 250, 
        y: 50 
      }, { 
        x: 250, 
        y: 180 
      }, { 
        x: 150, 
        y: 180 
      }, { 
        x: 150, 
        y: 50 
      }, { 
        x: 200, 
        y: 10 
      }], { 
      stroke: 'green', 
      strokeWidth: 3, 
      cornerStyle: 'circle', 
      lockRotation: true 
    }); 
  
    // Render the polyline in canvas  
    canvas.add(polyline);  
  </script> 
</body> 
</html>