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 remove controls of a text canvas using Fabric.js?
Fabric.js is a powerful tool written in JavaScript that makes it easier to build applications with interactive and dynamic graphics using HTML5 canvas. It offers many useful features, including the ability to add controls such as resizing and rotation handles to objects on the canvas. Sometimes, though, you might want to take away these controls from certain objects, like text, to limit what users can do. In this article, we'll show you how to remove controls from a text canvas using Fabric.js, using a simple example that you can follow along with.
How to Remove Controls of a Text?
To remove controls from a text canvas using Fabric.js, you can use the hasControls property, which lets you enable or disable controls for individual objects. When you set hasControls to false, it removes the controls associated with the specific object, preventing user interaction with it.
Syntax
new fabric.Text(text, options);
This function accepts two parameters, which are explained below −
fabric.Text is a function in Fabric.js that creates a text object.
The text parameter is a string that represents the content you wanna display.
The options parameter is an object that allows you to set additional properties for the text object, such as its position (left and top) and font size (fontSize), among others.
Example
In the below code, The HTML document includes the Fabric.js library by adding a script tag with the library's source URL.
In the script section, the Fabric.js canvas is initialized by creating a new instance of the fabric.Canvas class and associating it with the canvas element using its ID.
Then a text object is created using the fabric. Text constructor specifies the text content as "Hello, World!" and sets properties like its position (left and top) and font size (fontSize).
The hasControls property of the text object is set to false to disable controls such as resizing or rotation for that specific object.
Finally, the text object is added to the canvas using the canvas.add() method, which renders it on the canvas.
<html>
<head>
<!-- Loading the FabricJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<h2> Removing controls of a text canvas using Fabric.js</h2>
<canvas id="canvas" width="500" height="300" style="border:1px solid #000000;">
</canvas>
<script>
// Initialize Fabric.js canvas
var canvas = new fabric.Canvas("canvas");
// Create a text object
var text = new fabric.Text('Hello, World!', {
left: 100,
top: 100,
fontSize: 24,
hasControls: false, // Disable controls for the text object
});
// Add the text object to the canvas
canvas.add(text);
</script>
</body>
</html>
Example 2
In the below example, the HTML document contains a canvas element where the graphical output will be displayed.
Inside the body section, a canvas element with the ID "canvas" is defined, specifying its width and height.
In the script section, A text object is created using the fabric. Text constructor. It displays the text "Welcome!" and is positioned at coordinates (200, 200) on the canvas.
Additional properties are set for the text object, such as font size 36, bold font weight, and blue fill color.
The text object is added to the canvas using the canvas.add method, making it visible on the canvas
<html>
<head>
<!-- Loading the FabricJS library -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400"> </canvas>
<script>
// Initialize Fabric.js canvas
var canvas = new fabric.Canvas("canvas");
// Create a text object
var text = new fabric.Text('Welcome!', {
left: 200,
top: 200,
fontSize: 36,
fontWeight: 'bold',
fill: 'blue',
hasControls: false,
});
// Add the text object to the canvas
canvas.add(text);
</script>
</body>
</html>
Conclusion
In this tutorial, we learned how to remove control of a text using fabricjs with two examples, and we learned about fabric js and how It offers controls for resizing and rotation on canvas objects; sometimes, you need to restrict user interactions. With Fabric.js, you can easily remove controls from specific objects, like text, using the hasControls property. Setting hasControls to false disables the controls for that object, preventing user interaction. This article demonstrated the syntax and provided examples for removing controls from a text canvas using Fabric.js.
181 Views
