In this tutorial, we will learn how to set the opacity of a Circle using FabricJS. Circles are one of the various shapes provided by FabricJS. To create a circle, we will create an instance of the Fabric.Circle class and add it to the canvas. We can customize the circular object by adding a fill color, removing its borders, and even changing its dimensions. Likewise, we can also use the opacity property to change its opacity.
new fabric.Circle({ opacity: Number }: Object)Options (optional) - This parameter is a Object< /em> Provides additional customization for our circles. With this parameter, you can change the color, cursor, border width, and many other properties associated with objects for which opacity is an attribute
Opacity - This property accepts a number that allows us to control the opacity of the object. The default value of the opacity attribute is 1.
Default appearance of circle objects
Let’s look at a piece of code to see our circle What the object looks like using the default value of the opacity property.
<!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>Setting the opacity of Circle using FabricJS</h2>
<p>Here we haven't used the <b>opacity</b> property, but by default, it is set to 1. This is the default appearance. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#ff1493"
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Passing Opacity Property as Key
In this example we will see how assigning a value to the Opacity property changes Opacity round object in our canvas. Here we are using 0.3 as the opacity, which makes our circular object look semi-transparent instead of completely opaque.
<!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>Setting the opacity of Circle using FabricJS</h2>
<p>Here we have set the <b>opacity</b> at 0.3, which is why the circle appears dull. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#ff1493",
opacity: 0.3
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>The above is the detailed content of How to set opacity of circle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
