How to straighten an Image object using FabricJS?

In this tutorial, we are going to learn how to straighten an Image object using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to straighten an Image object, we use the straighten method.

Syntax

straighten(): fabric.Object

Passing the angle property a value without using the straighten method

Example

Let’s see a code example to see how our Image object looks when the straighten method is not used. The straighten method straightens an object by rotating it from its current angle to 0,90,180 or 270 etc., depending on the angle that is closer. The angle property sets the angle of rotation of an object in degrees. Here, we have specified the angle as 45. But since we have not applied the straighten property, the angle of rotation will remain as 45 degrees.


<!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>
      Passing the angle property a value without using the straighten method
   </h2>
   <p>You can see that the Image object has an angle of 45 degrees</p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         angle: 45,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Using the straighten method

Example

Let’s see a code example to see how the Image object looks like when the straighten method is used in conjunction with the angle property. Although we have set the angle of rotation as 45 degrees, our image object will be straightened by rotating it back to 0 degree as we have used the straighten 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 the straighten method</h2>
   <p>
      You can see that the angle of rotation is 0 degree for the image object
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         angle: 45,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the straighten method
      image.straighten();
   </script>
</body>
</html>