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 circle invisible using FabricJS?
In this tutorial, we are going to learn how to make a Circle invisible using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we have to create an instance of fabric.Circle class and add it to the canvas. Our circle 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.Circle({ visible: Boolean })
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our circle. 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: Circle with visible = true
Let's see a code to understand what happens when we pass the visible property a True value. By assigning the value as 'true' we make sure that our Circle 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>Making a circle visible using FabricJS</h2>
<p>Here, the circle is visible because we have set <b>visible</b> to True. This is the default behavior.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "#adff2f",
radius: 50,
stroke: "#228b22",
visible: true
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Circle with visible = false
In this example, we are passing the visible property as key with a False value. Assigning a false value will make sure that our circle object does not get rendered onto the canvas. It simply does not make the object 'invisible' but prevents it from being displayed altogether.
<!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>Making a circle invisible using FabricJS</h2>
<p>Notice that the circle is invisible here, as we have set <b>visible</b> to False.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "#adff2f",
radius: 50,
stroke: "#228b22",
visible: false
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
- The visible property controls whether an object is rendered on the canvas
- Default value is true, making objects visible by default
- Setting visible: false completely hides the object from the canvas
- This property is useful for temporarily hiding objects without removing them from the canvas
Conclusion
The visible property in FabricJS provides an easy way to control object visibility on the canvas. Use visible: false to hide objects without removing their code, making it useful for dynamic object management.
347 Views
