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 set the position of Textbox from left using FabricJS?
In this tutorial, we are going to learn how to set the position of a Textbox from the left 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. The position from left can be changed by using the left property.
Syntax
new fabric.Textbox(text: String, { left: Number }: 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 left is a property.
Options Keys
left ? This property accepts a Number value which sets the left position of an object. The value determines how far from left edge of canvas, the object will be placed.
Example 1: Default Placement of Textbox
Let's see a code example to understand the default placement of a textbox object in the canvas when its position has not been changed.
<!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>Default placement of the textbox object</h2>
<p>You can see the default placement of the textbox in this example</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("Keep calm and keep learning.", {
backgroundColor: "#e3dac9",
width: 400,
top: 70,
fill: "green",
stroke: "black",
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Example 2: Setting Custom Left Position
In this example we are assigning the left property with a custom value. Since it accepts a Number, you must assign it a numerical value which will represent its position from the left.
<!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 left property as key</h2>
<p>You can see that the textbox is placed at a distance of 70px from the left</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("Keep calm and keep learning.", {
backgroundColor: "#e3dac9",
width: 400,
left: 70,
top: 70,
fill: "green",
stroke: "black",
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Key Points
The
leftproperty accepts numeric values in pixelsDefault left position is 0 (aligned to canvas left edge)
Positive values move the textbox to the right
The left property can be changed dynamically after object creation
Conclusion
The left property in FabricJS provides precise control over textbox horizontal positioning. By setting different numeric values, you can place textboxes exactly where needed on your canvas.
386 Views
