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 a Rectangle transparent using FabricJS?
In this tutorial, we are going to learn how to make the controlling corners of Rectangle transparent using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a Rectangle, we will have to create an instance of fabric.Rect class and add it to the canvas. The transparentCorners property allows us to make the controlling corners of Rectangle transparent.
Syntax
new fabric.Rect({ transparentCorners: Boolean }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our rectangle. 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 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 (false value)
Let's see a code example to create a rectangle 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>Passing transparentCorners property as key with a "false" value</h2>
<p>You can select the rectangle to see that the controlling corners are opaque.</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 rectangle object
var rect = new fabric.Rect({
left: 155,
top: 70,
width: 170,
height: 70,
fill: "#f4f0ec",
stroke: "#2a52be",
strokeWidth: 5,
transparentCorners: false,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Example 2: Transparent Corners (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>Passing transparentCorners as key with a "true" value</h2>
<p>You can select the rectangle to see that the controlling corners are transparent.</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 rectangle object
var rect = new fabric.Rect({
left: 155,
top: 70,
width: 170,
height: 70,
fill: "#f4f0ec",
stroke: "#2a52be",
strokeWidth: 5,
transparentCorners: true,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Key Differences
| transparentCorners Value | Corner Appearance | Visual Effect |
|---|---|---|
| false | Opaque/Solid | Corners are filled with color |
| true (default) | Transparent | Corners show background through them |
Conclusion
The transparentCorners property in FabricJS provides control over the visual appearance of rectangle selection handles. Setting it to false creates solid corner handles, while true (default) makes them transparent for a cleaner interface.
224 Views
