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 a Circle using FabricJS?
In this tutorial, we are going to learn how to set the height of a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we have to create an instance of fabric.Circle class and add it to the canvas. We can manipulate a circle 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.Circle({ height: 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 height is a property.
Options Keys
-
height ? This property accepts a Number that allows us to specify the object's height. The value that is assigned determines the height of the controlling borders, not the visual circle itself.
Example 1: Default Height Behavior
Let's see an example to understand the default behaviour of the height property when not explicitly set.
<!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 Height of a Circle using FabricJS</h2>
<p>Note that the dimensions of the circle are controlled by its radius. Select the object and observe the height of its controlling borders. Here we have not used the <b>height</b> property.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Setting Custom Height
Since the dimensions of a circle are determined by its radius, there will not be any changes in its visual size. However, as we can see, the height of the controlling borders changes after assigning the height property a value.
<!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 Custom Height of a Circle using FabricJS</h2>
<p>Select the object and notice the height of its controlling borders. Here we have set the <b>height</b> to 150px.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
height: 150
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
- The
heightproperty in FabricJS circles affects the controlling borders, not the visual appearance of the circle - The actual size of a circle is always determined by its
radiusproperty - Setting a custom height is useful when you need specific bounding box dimensions for layout or interaction purposes
- The circle remains visually unchanged regardless of the height value
Conclusion
The height property in FabricJS circles controls the bounding box dimensions rather than the visual size. While the circle's appearance remains determined by its radius, the height property affects the controlling borders for selection and manipulation.
450 Views
