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 set the radius of a Circle using FabricJS?
In this tutorial, we are going to learn how to set the radius of a Circle using FabricJS. We can specify the position, colour, opacity and dimension of a circle object in the canvas, but first we will have to specify a radius for our circle to show up. This can be done by using the radius property.
Syntax
new fabric.Circle({ radius: Number }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our circle. 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 radius is a property.
Options Keys
-
radius ? This property accepts a Number value. The value that is assigned determines the radius of the circle in pixels.
Example 1: Basic Radius Property
Let's see an example to set the radius of a circle in FabricJS. In this example, we have assigned the radius property a value of 50 which creates a circle with a 50px radius. Decimal values are also supported.
<!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 radius of a circle using FabricJS</h2>
<p>Here we have set the <b>radius</b> at 50px.</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: "#85bb65"
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Using Expression for Radius
Instead of passing a single numerical value, you can assign an expression to the radius property. In this example, we use the expression [(30 * 3) + 10] which evaluates to 100, creating a circle with a 100px radius.
<!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 radius of a circle using FabricJS</h2>
<p>Here we have set the radius at 100px using an expression [(30*3)+10].</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: (30 * 3) + 10,
fill: "#ffa500"
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
- The
radiusproperty is essential for creating visible circles in FabricJS - Radius values are specified in pixels and accept both integers and decimals
- Mathematical expressions can be used to calculate radius values dynamically
- The radius determines the size of the circle from its center to its edge
Conclusion
The radius property is fundamental for creating circles in FabricJS. You can set it using direct numerical values or mathematical expressions to achieve the desired circle size for your canvas applications.
414 Views
