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 an Ellipse invisible using FabricJS?
In this tutorial, we are going to learn how to make an Ellipse invisible using FabricJS. Ellipse is one of the various shapes provided by FabricJS. In order to create an ellipse, we will create an instance of fabric.Ellipse class and add it to the canvas. Our ellipse 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.Ellipse( { visible: Boolean }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our ellipse. Using this parameter color, 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 Ellipse (Default Behavior)
Let's take an 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 Ellipse 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>How to make an Ellipse invisible using FabricJS?</h2>
<p>The object is visible on the canvas because we have set the <b>visible</b> property to True. This is the default behavior.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
rx: 100,
ry: 70,
fill: "red",
visible: true,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Making Ellipse Invisible
In this example, we are passing the visible property as key with a "false" value. Assigning a false value will make sure that our ellipse object does not get rendered onto the canvas. It simply does not make the object "invisible" but prevents it from being displayed altogether. This can be used to hide 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>How to make an Ellipse invisible using FabricJS?</h2>
<p>Here the ellipse object is invisible because we have set the <b>visible</b> property to False.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
rx: 100,
ry: 70,
fill: "red",
visible: false,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
- Setting
visible: truerenders the ellipse on canvas (default behavior) - Setting
visible: falsehides the ellipse completely from the canvas - The invisible object still exists in memory and can be made visible again by changing the property
- This is useful for temporarily hiding objects without removing them from the canvas
Conclusion
The visible property in FabricJS provides a simple way to control the visibility of ellipse objects on the canvas. Setting it to false effectively hides the object while keeping it in the canvas structure for later use.
253 Views
