Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Make a Triangle Invisible Using Fabric.js
<p>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 <em>fabric.Triangle</em> class and add it to the canvas.</p><p>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 <em>visible</em> property.</p><h2>Syntax</h2><pre class="just-code notranslate language-javascript" data-lang="javascript">new fabric.Triangle( { visible: Boolean }: Object)</pre><h2>Parameters</h2><ul class="list"><li><p><strong>Options</strong><strong> (optional)</strong> This parameter is an <em>Object</em> 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 <em>visible</em> is a property.</p></li></ul><h2>Options Keys</h2><ul class="list"><li><p><strong>visible</strong> This property accepts a <strong>Boolean</strong> value which allows us to render an object onto the canvas. Its default value is true.</p></li></ul><h2>Example 1</h2><p><strong>Passing <em>visible</em> property as key with a 'true' value</strong></p><p>Let's see a code example to understand what happens when we pass the <em>visible</em> 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.</p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!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 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 var triangle = new fabric.Triangle({ left: 60, top: 80, fill: "#b0e0e6", height: 90, width: 100, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html></pre><h2>Example 2</h2><p><strong>Passing <em>visible</em> property as key with a 'false' value</strong></p><p>In this example, we are passing the <em>visible</em>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 gets rid of it altogether. It can be used to remove an object from canvas without removing its code.</p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!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 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 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></pre>
146 Views
