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 the controlling corners of an Ellipse transparent using FabricJS?
In this tutorial, we are going to learn how to make the controlling corners of Ellipse transparent 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. The transparentCorners property allows us to make the controlling corners of Ellipse transparent.
Syntax
new fabric.Ellipse({ transparentCorners: 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 transparentCorners is a property.
Options Keys
-
transparentCorners ? This property accepts a Boolean value which allows us to render the controlling corners of an object as transparent. Its default value is true.
Example 1: Non-transparent Corners
Passing transparentCorners property as key with a 'false' value
Let's see a code to create an ellipse object with controlling corners that are not transparent. To achieve this, we need to pass the transparentCorners property a "false" value.
<!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 controlling corners of Ellipse transparent using FabricJS?</h2>
<p>Select the object and you will notice that the controlling corners are not transparent. Here we have set the <b>transparentCorners</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",
transparentCorners: false,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Transparent Corners
Passing transparentCorners as key with a 'true' value
In this example, we are passing the transparentCorners property a "true" value. This will make sure that the controlling corners are rendered as transparent. Note that this is also the default behaviour.
<!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 the controlling corners of an Ellipse transparent using FabricJS</h2>
<p>Select the object and you will notice that its controlling corners are now transparent as we have applied the <b>transparentCorners</b> property.</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",
transparentCorners: true,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
- The
transparentCornersproperty only affects the visual appearance of the controlling corners when an object is selected - Setting it to
falsemakes corners opaque with a solid fill color - Setting it to
true(default) makes corners transparent, showing only the border - This property is useful for customizing the user interface appearance of your FabricJS application
Conclusion
The transparentCorners property in FabricJS provides control over the visual appearance of object selection handles. By setting it to false, you can make corners opaque, while true keeps them transparent for a cleaner interface.
196 Views
