In this tutorial, we will create a circle with a background color using FabricJs. Circles are one of the various shapes provided by FabricJS. In order to create a circle, we must create an instance of the Fabric.Circle class and add it to the canvas. The backgroundColor property allows us to specify a color for the background of an object. It is the color of the square container (where the circle is).
new fabric.Circle({ backgroundColor: String }: Object)Options (optional) - This parameter is a Objects< /em> Provides additional customization for our objects. Using this parameter, you can change properties related to the Circle such as color, cursor, stroke width, and many other properties, of which backgroundColor is its property.
##backgroundColor - This property acceptsString Determines the color of the object's background. The value can be a hexadecimal value, an rgba value, or just the name of the color we want the background to be.
Passing the backgroundColor property as a key with a hexadecimal value
Let's look at an example of assigning a background color to a circular object using hexadecimal color values. In this example, we used the hexadecimal color code#d0db61, which is a dark khaki color.
<!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>Creating a circle with a background colour using FabricJS</h2>
<p>Notice the dark-khaki background around the circle. It appears as we have applied the <b>backgroundColor</b> property and assigned it a Hex color code. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "#74c365",
stroke: "#00b7eb",
strokeWidth: 2,
backgroundColor: "#d0db61",
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Passing backgroundColor property as key with rgba value
We can useRGBA (red, blue, green, and alpha) values instead of hexadecimal color codes. The alpha parameter specifies the opacity of the color. In this example, we used the rgba value (255,0,0,0.7), which is red with an opacity of 0.7.
<!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>Creating a circle with a background colour using FabricJS</h2>
<p>Notice the orange-red background around the circle. Here we have used the <b>backgroundColor</b> property and assigned it an 'rgba' value. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "green",
stroke: "blue",
strokeWidth: 2,
backgroundColor: "rgba(255,0,0,0.7)",
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>The above is the detailed content of How to create a circle with background color using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!
What are the production methods of html5 animation production?
Three major characteristics of java
jdk environment variable configuration
mstsc remote connection failed
What are the common management systems?
Solution to invalid signature
What are the definitions of arrays?
How to enter root privileges in linux
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
