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 Triangle invisible using FabricJS?
In this tutorial, we are going to learn how to make a Triangle invisible using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of fabric.Triangle class and add it to the canvas.
Our triangle 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.Triangle({ visible: Boolean }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our Triangle. 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: Triangle with visible: true
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 Triangle 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>Triangle with visible: true</h2>
<p>You can see the triangle 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 triangle object with visible: true (default)
var triangle = new fabric.Triangle({
left: 60,
top: 80,
fill: "#b0e0e6",
height: 90,
width: 100,
visible: true
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Triangle 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 triangle 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>Triangle with visible: false</h2>
<p>You can see the triangle 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 triangle object with visible: false
var triangle = new fabric.Triangle({
left: 60,
top: 80,
fill: "#b0e0e6",
height: 90,
width: 100,
visible: false
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Key Points
- The
visibleproperty controls whether a FabricJS object appears on the canvas - Default value is
true, meaning objects are visible by default - Setting
visible: falsehides the object completely from rendering - Hidden objects remain in the canvas object list and can be made visible again by changing the property
Conclusion
The visible property in FabricJS provides an easy way to control triangle visibility without removing objects from the canvas. Use visible: false to hide triangles and visible: true to display them.
207 Views
