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 Style of a Textbox Using Fabric.js
In this tutorial, we are going to see how to change the font style 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 style refers to the style of characters typed within a textbox.
Syntax
new fabric.Textbox(text: String, { fontStyle: 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 fontStyle is a property.
Options Keys
-
fontStyle This property accepts a String which allows us to set the typeface variation of the text inside our textbox. The possible values are "normal", "italic" and "oblique" which are explained below
normal The text displays the normal font style. This is also the default.
italic The text is displayed as cursive and slants to the right.
oblique The text is displayed as the sloped version of the normal typeface. It usually looks similar to italic but an italic is a special version of the font, whereas an oblique version is just the regular version inclined a bit.
Example 1
Passing the fontStyle property as key with the value as "oblique"
Let’s see a code example to understand how our textbox object would appear when the fontStyle property is used as key with a value as "oblique".
<!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 fontStyle property as key with the value as "oblique"</h2>
<p>You can see that the text is oblique</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("Good things happen to those who hustle.", {
backgroundColor: "#fff8dc",
width: 400,
left: 50,
top: 70,
fill: "#cf3476",
fontStyle: "oblique",
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Example 2
Passing the fontStyle property as key with the value as "italic"
In this example, we are passing the fontStyle property as key, with a value as "italic". This means that our textbox object will be rendered with text that is slanted to the right.
<!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 fontStyle property as key with the value as "italic"</h2>
<p>You can see that the text is italic</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("Good things happen to those who hustle.", {
backgroundColor: "#fff8dc",
width: 400,
left: 50,
top: 70,
fill: "#cf3476",
fontStyle: "italic",
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
825 Views
