How to add default vertical scaling to a text canvas using Fabric.js?


We can add default vertical scaling to a text canvas using Fabric.js by first creating a text object and then setting the "scaleY" property to the desired scaling value. Additionally, we can use the "setCoords()" method to update the object's coordinates to reflect the scaling change. Before diving into the approach let’s just have a quick look what Fabric.js is −

What is Fabric.js?

Fabric.js is a JavaScript library for creating and manipulating HTML5 canvas elements. It allows developers to create and manipulate canvas elements using an object-oriented API, making it easy to add, edit, and delete shapes, text, images, and other elements on a canvas.

Fabric.js also includes a wide range of features such as event handling, animation, and object manipulation, making it a powerful tool for creating interactive canvas-based applications.

Fabric.js is a library for working with object-oriented canvas graphics. It provides an easy-to-use API for creating and manipulating canvas elements, such as shapes, text, and images.

With Fabric.js, you can create complex canvas graphics and animations using JavaScript, without the need for low-level canvas API calls. It also provides a set of built-in objects, such as rectangles, circles, and text, that can be easily manipulated using the library's API.

Additionally, fabric.js provides many useful features such as events handling, undo/redo, object serialization, and more. It also has a wide variety of built-in filters and image-manipulation functions.

Fabric.js is widely used in web development, particularly in creating interactive graphics and charts, and creating user interface elements such as image editors and custom form inputs.

Approach

Let’s now discover the approach we are going to use to vertically scale the text −

  • First, create a new canvas using the Fabric.js canvas constructor.

  • Next, create a new text object using the Fabric.js text constructor, and set the text and font properties as desired.

  • Add the text object to the canvas using the canvas.add() method.

  • To add default vertical scaling to the text, set the scaleY property of the text object to a value greater than 1. For example, to scale the text by 1.5 times vertically, set the scaleY property to 1.5.

  • Finally, call the canvas.renderAll() method to update the canvas and display the scaled text.

The following code snippet shows the same −

var canvas = new fabric.Canvas('myCanvas');
var text = new fabric.Text('Hello World', {
   fontFamily: 'Arial',
   fontSize: 24,
   scaleY: 1.5
});
canvas.add(text);
canvas.renderAll();

This will add the text "Hello World" to the canvas with a default vertical scaling of 1.5 times. To see this code in action let’s see a complete working example of the process −

Example

<!DOCTYPE html>
<html>
<head>
   <title>Canvas Text Scaling</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
   </script>
</head>
   <body>
      <canvas id="canvas"></canvas>
      <script>
         var canvas = new fabric.Canvas('canvas');
         var text = new fabric.Text('Hello World', {
            fontFamily: 'Arial',
            fontSize: 24,
            scaleY: 1.5
         });
         canvas.add(text);
         canvas.renderAll();
      </script>
   </body>
</html>

Updated on: 06-Feb-2023

214 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements