How to add vertical skew to a canvas-type text using Fabric.js?

FabricJS Javascript Library Front End Technology

To add vertical skew to a canvas-type text using Fabric.js, we first need to create a text object. Next, we can use the "setSkewY" method and pass in the desired degree of skew as a parameter. Finally, we can call the "renderAll" method to update the canvas with the skewed text. Let us first understand what Fabric.js is.

What is Fabric.js?

Fabric.js is a JavaScript library that allows you to create and manipulate canvas elements in a web page.
It provides a variety of objects such as text, images, shapes, and more that can be added to a canvas, as well as methods for manipulating and styling these objects.
It also includes support for events, animation, and object-oriented programming, making it a powerful tool for creating interactive and dynamic canvas-based applications.
Fabric.js is an open-source library and is actively developed and maintained by a community of developers.
It is widely used in web development, especially in creating interactive graphics, diagrams, animations, and games.

Approach

Create a new canvas element in your HTML file and give it an id (e.g. "myCanvas").
Add fabric.js script in your HTML head tag −

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>

In your JavaScript file, create a new Fabric.js canvas object by using the id of the canvas element −

var canvas = new fabric.Canvas('myCanvas');

Create a new text object by using the fabric.Text constructor −

var text = new fabric.Text('Hello, World!', {
   left: 100,
   top: 100,
   fontSize: 24
});

Add the text object to the canvas −

canvas.add(text);

To add vertical skew to the text, you can use the skewY property of the text object. This property takes a value in degrees, where positive values will skew the text to the right, and negative values will skew the text to the left −

text.skewY = 10;

Finally, call the renderAll() method of the canvas to update the canvas with the new skew value −

canvas.renderAll();

Your text should now be skewed vertically on the canvas. You can adjust the skew value as needed to achieve the desired effect.

Example

Here is a full working example of adding vertical skew to a canvas text using Fabric.js −

<!DOCTYPE html>
<html>
<head>
   <title>Vertical Skew</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>
</head>
   <body>
      <div>
         <canvas id="myCanvas"></canvas>
      </div>
      <script>
         // Create a new canvas object
         var canvas = new fabric.Canvas('myCanvas');
         
         // Create a new text object
         var text = new fabric.Text('Hello, World!', {
            left: 100,
            top: 100,
            fontSize: 24
         });
         
         // Add the text object to the canvas
         canvas.add(text);
         
         // Set the skewY property of the text object to 10 degrees
         text.skewY = 10;
         
         // Render the canvas
         canvas.renderAll();
      </script>
   </body>
</html>

AmitDiwan

Updated on: 13-Feb-2023

249 Views

Kickstart Your Career

Get certified by completing the course

Get Started