Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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() and adding it to our canvas
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
Manipulating the Circle object by 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>
749 Views
