Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make a Textbox invisible using FabricJS?
In this tutorial, we are going to learn how to make a Textbox invisible using FabricJS. Textbox is one of the various shapes provided by 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. Our textbox object can be customized in various ways like changing its dimensions, adding a background color or by making it visible or invisible. We can do this by using the visible property.
Syntax
new fabric.Textbox(text: String, { visible: 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 visible is a property.
Options Keys
visible: This property accepts a Boolean value which allows us to render an object onto the canvas. Its default value is true.
Example 1
Passing visible property as key with a "true" value
Let’s see a code example to understand what happens when we pass the visible property a true value. By assigning the value as "true", we make sure that our Textbox object is rendered onto the canvas. This is also the default behaviour in FabricJS.
<!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 visible property as key with a "true" value</h2> <p>You can see the textbox object has been rendered onto the canvas</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("A smooth sea never made a skillful sailor.", { backgroundColor: "#fffff0", width: 400, left: 110, top: 70, fill: "violet", strokeWidth: 2, stroke: "blue", textAlign: "center", visible: true, }); // Add it to the canvas canvas.add(textbox); </script> </body> </html>
Example 2
Passing visible property as key with a "false" value
In this example, we are passing the visible property as key with a false value. Assigning a false value will make sure that our textbox object does not get rendered onto the canvas. It simply does not make the object ‘invisible’ but gets rid of it altogether. It can be used to remove an object from canvas without removing its code.
<!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 visible property as key with a "false" value</h2> <p>You can see the textbox object has not been rendered onto the canvas</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("A smooth sea never made a skillful sailor.", { backgroundColor: "#fffff0", width: 400, left: 110, top: 70, fill: "violet", strokeWidth: 2, stroke: "blue", textAlign: "center", visible: false, }); // Add it to the canvas canvas.add(textbox); </script> </body> </html>
220 Views
