Skip to content
Related Articles

Related Articles

Fabric.js Polyline lockRotation Property

Improve Article
Save Article
Like Article
  • 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 
  </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>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!