How to change character spacing of text canvas using Fabric.js?

The fabric.Text object of Fabric.JS is used to change the corner style of a canvas-type text. Text class of Fabric.js provides the text abstraction by using the fabric.Text object, which allows us to work with text in an object-oriented way. Comparing to the canvas class the Text class provides the rich functionality.

The text object contains the different properties, but to change the character spacing of a text canvas can be done using one of the property i.e., charSpacing. This property sets the spacing between characters in pixels. You can also use the setCharSpacing method to changing the spacing of character for an existing text object on the canvas.

The charSpacing property can be set when creating a new fabric.Text object or changed for an existing text object using the setCharSpacing method. charSpacing property is measured in pixels and specifies the amount of space to be added between each character in the text object.

By default, the charSpacing property is set to 0 (no character spacing).

Changing the charSpacing property of a text object will cause the text to be re-rendered on the canvas. The charSpacing property is independent of the fontSize property, so increasing the charSpacing of a text object will not cause the font size to change.


The following is the syntax for the text −

fabric.Text(text, charSpacing: number);


  • text − Text which must written must be specified

  • charSpacing − Specify the space between the characters


Follow the below-given steps to change the font-weight of a canvas-type text using Fabric.js −

  • Step 1 − Include the Fabric.js library in your HTML file

  • Step 2 − Create a new canvas element in your HTML file

  • Step 3 − Initialize the canvas element in your JavaScript code

  • Step 4 − Create a new Fabric.js Text object and set the charSpacing property to the desired charSpacing value

  • Step 5 − Add the Text object to the canvas


In this example, we change the character space of a text canvas using the Fabric.js −

      <script src= ""> </script>
      <h2>Changing the Character Spacing of a text canvas using Fabric.js</h2>
      <p>Character spacing of the below text is changed to 500.</p>
      <canvas id="idcanvas" width="700" height="400"> </canvas>
         // Creating instances of new for the Canvas	 
         var canvas = new fabric.Canvas("idcanvas"); 

         // Creating the instance for the new Textbox
         var text1 = new fabric.Text('Hello World!', {
            top: 50,
            fontSize: 40,
            charSpacing: 500 

         // Rendering the Textbox on an Canvas

This will create a canvas element with a text object with a character spacing of 500 pixels. You can adjust the charSpacing value to change the character spacing of the text.


In this article, we discussed how to change the character spacing of text canvas along with examples. In the example, we have changed the character spacing of the canvas text by using the charSpacing property. Here, we changed character spacing between the characters to 500 pixels.

Updated on: 21-Feb-2023


Kickstart Your Career

Get certified by completing the course

Get Started