How to set the angle of an Image using FabricJS?



In this tutorial, we are going to learn how to set the angle of an Image 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 set the angle of an Image, we use the angle property.

Syntax

new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { angle: Number }: Object, callback: function)

Parameters

  • element − This parameter accepts HTMLImageElement, HTMLCanvasElement, HTMLVideoElement or String which denotes the image element. The String should be a URL and would be loaded as an image.

  • options (optional) − This parameter is an Object which provides additional customizations to our object. Using this parameter origin, stroke width and a lot of other properties can be changed related to the image object of which angle is a property.

  • callback (optional) − This parameter is a function which is to be called after eventual filters are applied.

Options Keys

  • angle − This property accepts a Number that determines the angle of rotation of an object in degrees.

Default appearance of Image object

Example

Let’s see a code example of how the Image object appears when the angle property is not used.

<!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>Default appearance of Image object</h2> <p>You can see the default appearance of 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, }); // Add it to the canvas canvas.add(image); </script> </body> </html>

Using the angle property

Example

In this example, we have used the angle property and assigned it a value of 60. This will make sure that our Image object has an angle of rotation of 60 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>Using the angle property</h2> <p>You can see that the angle of rotation is 60 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: 60, }); // Add it to the canvas canvas.add(image); </script> </body> </html>

Advertisements