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 make a Rectangle invisible using FabricJS?
In this tutorial, we are going to learn how to make a Rectangle invisible using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we will have to create an instance of fabric.Rect class and add it to the canvas.
Our rectangle 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.Rect({ visible: Boolean }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our rectangle. 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: Visible Rectangle (Default Behavior)
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 Rectangle object is rendered onto the canvas. This is also the default behavior 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 rectangle 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 rectangle object
var rect = new fabric.Rect({
left: 55,
top: 60,
width: 170,
height: 70,
fill: "#f4f0ec",
stroke: "#2a52be",
strokeWidth: 5,
visible: true,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Example 2: Invisible Rectangle
In this example, we are passing the visible property as key with a false value. Assigning a false value will make sure that our rectangle 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 rectangle 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 rectangle object
var rect = new fabric.Rect({
left: 55,
top: 60,
width: 170,
height: 70,
fill: "#f4f0ec",
stroke: "#2a52be",
strokeWidth: 5,
visible: false,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Key Points
- The
visibleproperty is a boolean that controls whether a FabricJS object appears on the canvas - Setting
visible: truerenders the object (default behavior) - Setting
visible: falsehides the object completely from the canvas - The object still exists in memory and can be made visible again by changing the property
Conclusion
The visible property in FabricJS provides a simple way to control rectangle visibility without removing the object from the canvas entirely. This is useful for temporarily hiding elements or creating interactive interfaces.
302 Views
