The property controlsAboveOverlay in Fabric.js is a boolean that, when set to true, will display the controls (borders, corners, etc.) of an object above the overlay image. The overlay image is an image that can be placed on top of the canvas.
Currently, it is resulting in the appearance shown below. The outer part displays only the controls.
https://i.sstatic.net/2fsKOXgM.png
I want to achieve a look where the outer part of the element has a 0.5 opacity. Like this:
https://i.sstatic.net/wDofglY8.png
Below is a sample HTML code snippet for reference:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fabric.js Example with controlsAboveOverlay</title>
<!-- Importing the Fabric.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
</head>
<body>
<!-- Creating a canvas element with id 'canvas' -->
<canvas id="canvas" width="400" height="400"></canvas>
<style>
.canvas-container {
/* Setting the background color of the canvas container */
background-color: #f0f0f0;
}
</style>
<script>
(function () {
/* Initializing a new Fabric.js canvas with certain properties */
var canvas = new fabric.Canvas("canvas", {
width: 600,
height: 500,
backgroundColor: "#ffffff",
/* Setting controlsAboveOverlay to true to render controls above the overlay image */
controlsAboveOverlay: true,
});
/* Creating a rectangular clip path */
var clipPath = new fabric.Rect({
width: 300,
height: 300,
left: (canvas.getWidth() - 300) / 2,
top: 10,
});
/* Creating a group of objects, in this case, a single rectangle */
var group = new fabric.Group([
new fabric.Rect({
width: 100,
height: 100,
fill: "red",
left: (canvas.getWidth() - 150) / 2,
top: 10,
}),
]);
/* Applying the clip path to the canvas */
canvas.clipPath = clipPath;
/* Adding the group of objects to the canvas */
canvas.add(group);
})();
</script>
</body>
</html>