Open In App

Fabric.js Path lockRotation Property

Last Updated : 25 Jan, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to see how to set the lockRotation of a Path using Fabric.js. The Path in Fabric.js is movable and can be stretched according to requirements. Further, the Path can be customized when it comes to initial stroke color, height, width, fill color, or stroke width.

To make it possible we are going to use a JavaScript library called Fabric.js. After importing the library, we will create a canvas block in the body tag that will contain the Path. After this, we will initialize instances of Canvas and Path provided by Fabric.js and lock the rotation of the canvas Path using lockRotation property.

Syntax:

fabric.Path('path', {
  lockRotation: Boolean
});

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

  • lockRotation: It specifies whether to lock rotation of canvas.

Below example illustrates the use of Fabric.js Path lockRotation property in JavaScript:

Example:

HTML




<!DOCTYPE html> 
<html
  
<head>
  <!-- FabricJS CDN -->
  <script src
  </script
</head
  
<body
  <div style="text-align: center;width: 400px;"
    <h1 style="color: green;"
      GeeksforGeeks 
    </h1>
    <b
      Fabric.js | Path lockRotation Property 
    </b
  </div
  
  <div style="text-align: center;"
    <canvas id="canvas" width="400" height="200"
      style="border:1px solid green;"
    </canvas
  </div
  
  <script
    // Initiate a Canvas instance 
    var canvas = new fabric.Canvas("canvas"); 
  
    var geek = new fabric.Path('M 0 0 L 100 100 L 0 100 z', {
      fill: 'green',
      lockRotation: true
    });
  
    canvas.add(geek);
    canvas.centerObject(geek);
  </script
</body
  
</html>


Output:



Similar Reads

Fabric.js | Ellipse lockRotation Property
In this article, we are going to see how to lock the rotation of the canvas ellipse using FabricJS. The canvas means ellipse is movable and can be stretched according to requirement. Further, the ellipse can be customized when it comes to initial stroke color, fill color, stroke width, or radius. Approach: To make it possible, we are going to use a
2 min read
Fabric.js | Rect lockRotation Property
In this article, we are going to see how to lock the rotation of the canvas rectangle using FabricJS. The canvas rectangle means rectangle is movable and can be stretched according to requirement. Further, the rectangle can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To make it possible, we are g
2 min read
Fabric.js | Triangle lockRotation Property
In this article, we are going to see how to lock the rotation of the canvas triangle using FabricJS. The canvas triangle means the triangle is movable and can be stretched according to requirement. Further, the triangle can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To make it possible we are go
2 min read
Fabric.js Polygon lockRotation Property
In this article, we are going to see how to lock the rotation of the canvas polygon using FabricJS. The canvas polygon means the polygon is movable and can be stretched according to requirement. Further, the polygon can be customized when it comes to initial stroke color, shape, fill color, or stroke width. To make it possible we are going to use a
3 min read
Fabric.js Image lockRotation Property
Fabric.js is a JavaScript library that is used to work with canvas. The canvas image is one of the class of fabric.js that is used to create image instances. The canvas image means the Image is movable and can be stretched according to requirement. The lockRotation property of the image is used to enable or disable the rotation of the image. Approa
2 min read
Fabric.js Textbox lockRotation Property
In this article, we are going to see how to lock the rotation of the canvas Textbox using lockRotation Property in FabricJS. The canvas means Textbox is movable and can be stretched according to requirement. Further, the Textbox can be customized when it comes to initial stroke color, fill color, stroke width, or radius. Approach: To make it possib
2 min read
Fabric.js Line lockRotation Property
In this article, we are going to see if the option set to true will lock the rotation in a canvas line in FabricJS. The canvas line means the line is movable and can be stretched according to requirement. Further, the line can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. Syntax: fabric.line({ lock
2 min read
Fabric.js Polyline lockRotation Property
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 }); Param
2 min read
Fabric.js Itext lockRotation Property
Fabric.js is a JavaScript library that is used to work with canvas. The canvas Itext is one of the class of fabric.js that is used to create Itext instances. The canvas Itext means the Itext is movable and can be stretched according to requirement..In this article we will be using, lockRotation property is used to lock the rotation in a canvas Itex
2 min read
Fabric.js Group lockRotation Property
In this article, we are going to see how to set the lockRotation of a Group of the canvas using Fabric.js. The Group in Fabric.js is movable and can be stretched according to requirements. Further, the Group can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To make it possible we are going to use a
2 min read