Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Change Font Weight of Canvas Text 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 font-weight of a text canvas can be done using one of the font property i.e., fontWeight. The fontWeight property of a Fabric.js Text object specifies the weight or thickness of the text characters. It can be used to make the text appear thicker or thinner.
Syntax
The following is the syntax for the text object ?
fabric.Text(text, fontWeight: number | string);
Parameter
text ? Used to specify which text must be write
fontWeight ? Specify the weight of the font as a bold, normal, italic, etc.,
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 fontWeight property to the desired fontweight value.
Step 5 ? Add the Text object to the canvas.
Example
Let us see how can we change the font-weight of a canvas-type text using the fabric.js ?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Changing font-weight of a canvas type text using Fabric.js</h2>
<p>Select the textbox to see that the controlling corners.</p>
<p>Font Weight is schnged to "bold".</p>
<canvas id="mycanvas"></canvas>
<script>
var canvas = new fabric.Canvas('mycanvas');
var textcontent = new fabric.Text('Welcome to Tutorials Point!', {
left: 50,
top: 50,
fontSize: 30,
fontWeight: 'bold'
});
canvas.add(textcontent);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
This code will create a new canvas element with the specified ID, create a new Fabric.js Text object with the text "Hello World!", set the font-weight of the text to 'bold', and add the text object to the canvas. The text will appear on the canvas with a bold font-weight.
Example
Let us see another example where we can change the font-weight of a canvas-type text to italic using the fabric.js
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Changing the font-weight of a canvas type text using Fabric.js</h2>
<p>Select the textbox to see that the controlling corners.</p>
<p>Font Weight is schnged to "italic".</p>
<canvas id="thiscanvas" width="600" height="500"></canvas>
<script>
var canvas = new fabric.Canvas('thiscanvas');
var textcontent1 = new fabric.Text('Welcome to Tutorials Point!', {
left: 50,
top: 50,
fontSize: 30,
fontWeight: 'italic'
});
canvas.add(textcontent1);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
This code will create a new canvas element with the specified ID and dimensions, create a new Fabric.js Text object with the text "Hello World!", set the font-weight of the text to 'italic', and add the text object to the canvas. The text will appear on the canvas with a italic font-weight.
Conclusion
In this article, we have demonstrated how to change the font-weight of a canvas-type text along with examples. We have seen the two different examples here, we used the fontWeight property for changing the font-weight of a canvas text. In the first example, we used the ?bold' as the value for changing the text to bold. For the second example, we used the ?Italic' as a value for changing the text to italic.
389 Views
