Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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 an ellipse using FabricJS?
In this tutorial, we are going to learn how to create a canvas with an Ellipse object using FabricJS. Ellipse is one of the various shapes provided by FabricJS. In order to create an ellipse, we will create an instance of fabric.Ellipse class and add it to the canvas.
Syntax
new fabric.Ellipse({ rx: Number, ry: Number }: Object)Parameters
options (optional) − This parameter is an Object which provides additional customizations to our ellipse. Using this parameter color, cursor, stroke width and a lot of other properties can be changed related to the ellipse object of which rx and ry are properties.
Options Keys
rx − This property accepts a Number which determines the horizontal radius of the ellipse. If we don't specify a horizontal radius, our ellipse would not be displayed on our canvas.
ry − This property accepts a Number which determines the vertical radius of the ellipse. If we don't specify a vertical radius, our ellipse would not be displayed on our canvas.
Example 1
Creating an instance of fabric.Ellipse() and adding it to our canvas
Let's see an example of how we can add an ellipse to our canvas. Here we have created an object with a horizontal radius of 80px and vertical radius of 50 px. We have used sky blue color to fill in our object whose hexadecimal value is #87ceeb.
<!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>How to create a canvas with an ellipse using FabricJS?</h2>
<p>Here we have created an ellipse object and set it over a canvas.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an Ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 100,
fill: "#87ceeb",
rx: 80,
ry: 50,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Example 2
Manipulating the Ellipse object by using the set method
In this example, we have assigned the properties to the ellipse 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>How to create a canvas with an ellipse using FabricJS?</h2>
<p>Here we have used the <b>set</b> method to create an ellipse object over the canvas. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an Ellipse instance
var ellipse = new fabric.Ellipse();
// Using set to set the properties
ellipse.set("rx", 90);
ellipse.set("ry", 40);
ellipse.set("fill", "#1e90ff");
ellipse.set({
stroke: "rgba(245,199,246,0.5)",
strokeWidth: 6
});
ellipse.set("left", 150);
ellipse.set("top", 90);
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
286 Views
