- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Syntax
The following is the syntax for the text −
fabric.Text(text, charSpacing: number);
Parameters
text − Text which must written must be specified
charSpacing − Specify the space between the characters
Steps
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
Example
In this example, we change the character space of a text canvas using the Fabric.js −
<html>
<head>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> </script>
</head>
<body>
<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>
<script>
// 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
canvas.add(text1);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
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.
Conclusion
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.
275 Views
