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 height of an Ellipse using FabricJS?
In this tutorial, we are going to learn how to set the height of an Ellipse 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. We can manipulate an ellipse object by changing its position, opacity, stroke and also its dimension. FabricJS allows us to control an object's dimensions by using the width and height properties.
Syntax
new fabric.Ellipse({ height: 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 object of which height is a property.
Options Keys
-
height ? This property accepts a Number and allows us to specify the object's height. However, for ellipses, the dimensions are primarily controlled by rx (horizontal radius) and ry (vertical radius) properties.
Important Note
In FabricJS ellipses, the height property has limited effect because ellipse dimensions are determined by their horizontal radius (rx) and vertical radius (ry). The height property is more relevant for rectangular shapes like rectangles and text objects.
Example 1: Default Ellipse Without Height Property
Let's create an ellipse using only the radius properties to understand the default behavior.
<!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>Default Ellipse with rx and ry properties</h2>
<p>Here we have set the dimensions using horizontal radius (rx) and vertical radius (ry) only.</p>
<canvas id="canvas1"></canvas>
<script>
// Initiate a canvas instance
var canvas1 = new fabric.Canvas("canvas1");
// Initiate an ellipse instance
var ellipse1 = new fabric.Ellipse({
left: 100,
top: 100,
fill: "lightblue",
rx: 100,
ry: 60,
stroke: "#c154c1",
strokeWidth: 3,
});
// Adding it to the canvas
canvas1.add(ellipse1);
canvas1.setWidth(400);
canvas1.setHeight(250);
</script>
</body>
</html>
Example 2: Adding Height Property to Ellipse
Now let's add the height property and observe that it doesn't change the ellipse dimensions because rx and ry take precedence.
<!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>Ellipse with height property</h2>
<p>Even with the height property set to 90, the ellipse maintains its original dimensions controlled by rx and ry.</p>
<canvas id="canvas2"></canvas>
<script>
// Initiate a canvas instance
var canvas2 = new fabric.Canvas("canvas2");
// Initiate an ellipse instance with height property
var ellipse2 = new fabric.Ellipse({
top: 100,
left: 100,
fill: "lightcoral",
rx: 100,
ry: 60,
height: 90, // This won't affect the ellipse size
stroke: "#c154c1",
strokeWidth: 3,
});
// Adding it to the canvas
canvas2.add(ellipse2);
canvas2.setWidth(400);
canvas2.setHeight(250);
</script>
</body>
</html>
Key Points
- For ellipses in FabricJS, use rx and ry properties to control dimensions
- The height property has minimal effect on ellipse shapes
- Ellipse dimensions are calculated as width = 2 × rx and height = 2 × ry
- The height property is more useful for rectangular shapes and text objects
Conclusion
While FabricJS provides a height property for ellipses, it's more effective to control ellipse dimensions using the rx and ry properties. The height property is primarily designed for rectangular shapes rather than elliptical ones.
290 Views
