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 a Textbox Using Fabric.js
In this tutorial, we are going to see how to change the font weight of a Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. Font weight refers to the value which determines how bold or light our text will appear.
Syntax
new fabric.Textbox(text: String, { fontWeight: Number|String }: Object)
Parameters
text This parameter accepts a String which is the text string that we want to display inside our textbox.
options (optional) This parameter is an Object which provides additional customizations to our textbox. Using this parameter, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the object of which fontWeight is a property.
Options Keys
fontWeight This property accepts a Number or String value which determines how bold or light our text shall appear inside the textbox. Its default value is normal.
Example 1
Passing the fontWeight property as key with a numerical value
Let’s see a code example to understand how our textbox object would appear when the fontWeight property is used as key with a numerical value. In this case we have set the value as 400 which means that our text will have normal font. We can also use other values such as 600 or 800.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Passing the fontWeight property as key with a numerical value</h2>
<p>You can see that the text is of normal font</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a textbox object
var textbox = new fabric.Textbox("Solitary trees, if they grow at all, grow strong.", {
backgroundColor: "#fff8dc",
width: 400,
left: 50,
top: 70,
fill: "#cf3476",
fontWeight: 400,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Example 2
Passing the fontWeight property as key with the value as "bold"
In this example, we are passing the fontWeight property as key, with a value as “bold”. This means that our textbox object will be rendered with text that has thicker letters.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Passing the fontWeight property as key with the value as “bold”</h2>
<p>You can see that the textbox object has been rendered with bold text</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a textbox object
var textbox = new fabric.Textbox("Solitary trees, if they grow at all, grow strong", {
backgroundColor: "#fff8dc",
width: 400,
left: 50,
top: 70,
fill: "#cf3476",
fontWeight: "bold",
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
485 Views
