Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to flip a Textbox horizontally using FabricJS?
In this tutorial, we are going to learn how we can flip a Textbox object horizontally 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. We can flip a textbox object horizontally using the flipX property.
Syntax
new fabric.Textbox(text: String, { flipX: Boolean }: 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 flipX is a property.
Options Keys
-
flipX ? This property accepts a Boolean value which allows us to flip an object horizontally.
Example 1: Default Orientation (flipX: false)
Let's see a code example that shows us the default orientation of a textbox object in FabricJS. Since we are passing the flipX property a false value, the text will not be flipped horizontally.
<!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 flipX as key with a "false" value</h2>
<p>You can see that the text has not flipped horizontally</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("Each day provides its own gifts.", {
backgroundColor: "#e3dac9",
width: 400,
left: 70,
top: 70,
flipX: false,
});
// Create gradient fill
textbox.set(
"fill",
new fabric.Gradient({
type: "linear",
coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
colorStops: [
{ offset: 0, color: "#545a2c" },
{ offset: 1, color: "#6495ed" },
],
})
);
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Example 2: Horizontal Flip (flipX: true)
In this example, we have a textbox object of width 400px with a horizontal linear gradient fill. As we apply the flipX property to the textbox object, the text flips horizontally and thus we see that the gradient and the text has flipped as well.
<!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 flipX property as key with a 'true' value</h2>
<p>You can see that the text has flipped horizontally</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("Each day provides its own gifts.", {
backgroundColor: "#e3dac9",
width: 400,
left: 70,
top: 70,
flipX: true,
});
// Create gradient fill
textbox.set(
"fill",
new fabric.Gradient({
type: "linear",
coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
colorStops: [
{ offset: 0, color: "#545a2c" },
{ offset: 1, color: "#6495ed" },
],
})
);
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Key Points
The
flipXproperty accepts a boolean value (true/false)Setting
flipX: truemirrors the textbox horizontallyBoth the text content and any applied fills or styles are flipped together
This property is useful for creating mirror effects or reversed text layouts
Conclusion
The flipX property in FabricJS provides an easy way to horizontally flip textbox objects. Set it to true to mirror the textbox or false to keep the default orientation.
337 Views
