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 create a canvas with Circle using FabricJS?
In this tutorial, we are going to learn about how to create a canvas with a Circle object using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will have to create an instance of fabric.Circle class and add it to the canvas.
Syntax
new fabric.Circle({ radius: Number }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our object. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the circle of which radius is a property.
Options Keys
-
radius ? This property accepts a Number which determines the radius of the circle. If we don't specify a radius, our circle would not be displayed on our canvas.
Example 1: Creating an Instance of fabric.Circle()
Let's see an example of how we can add a circle to our canvas. Here we have created a circle with radius 50px. The stroke property signifies the border-colour and strokeWidth specifies how wide it shall be. We have used sky-blue colour to fill in our object whose hexadecimal value is #80daeb.
<!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 canvas with circle using FabricJS</h2>
<p>Here we have created a circle of radius 50px over a canvas. In addition, we have used the <b>fill</b> and <b>stroke</b> properties to color its body and outline.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Creating an instance of the fabric.Circle class
var circle = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "#80daeb",
stroke: "#00b7eb",
strokeWidth: 2,
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Using the set() Method
In this example, we have assigned the properties to the circle by using the set method which is a setter for values. Any property related to stroke, strokeWidth, radius, scaling, rotation, etc., can be mutated by using this method.
<!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 canvas with circle using FabricJS</h2>
<p>Here we have used the <b>set</b> method to create a circle of radius 40px and then filled the object with a color.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle();
canvas.add(circle);
// Use set to set the properties
circle.set("radius", 40);
circle.set("fill", "green");
circle.set({
stroke: "rgba(133, 187, 101, 0.7)",
strokeWidth: 4
});
circle.set("left", 50);
circle.set("top", 50);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
The
radiusproperty is required to display the circle on the canvasYou can set properties during instantiation or use the
set()method laterCommon properties include
fill,stroke,strokeWidth,left, andtopAlways add the circle to the canvas using
canvas.add()method
Conclusion
FabricJS makes creating circles simple with the fabric.Circle class. You can customize appearance using properties like radius, fill, and stroke, either during initialization or with the set() method.
796 Views
