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 set position relative to top of a canvas circle using Fabric.js?
The Circle class of Fabric.js which is used to provide the circle shape by using the fabric.Circle object. The Circle object is used to provide the circle shape, and the circle is movable, and it can be stretched according to the requirements. For the stroke, color, width, height, and fill color the Circle is customizable. Comparing to the canvas class the Circle class provides the rich functionality.
The Circle class contains the different properties, but to set the position relative to top of a canvas circle can be done using top property. The top property of a Fabric.js class specifies the position relative to top of a circle. It can be used to make or set the circle to position relative to top. The top property is used to specify or set the vertical position of the circle which is relative to the top of the canvas.
Syntax
The following is the syntax for the circle object −
fabric.Circle(radius: number, top: number);
Parameter
The following are the two parameters which are used for setting the position relative to top of a canvas circle −
radius − Used to specify radius of the circle
top − Specify the top edge relative distance
Steps
Follow the below-given steps to set the position relative to top of a canvas circle using the Fabric.js −
Step 1 − Include the Fabric.js library in your HTML file
Step 2 − Create a new canvas element in your HTML file
Step 3 − Initialize the canvas element in your JavaScript code
Step 4 − Create a new Fabric.js Circle Class object and set the top property to the desired circle value
Step 5 − The top property is used to specify the canvas circle to the top edge
Step 6 − Add the circle object to the canvas
Example
Let us see how can we set the position relative to top of a canvas circle using the fabric.js −
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Setting the position relative to top of a canvas circle using the Fabric.js</h2>
<p>You can select the textbox to see the controlling corners.</p>
<p>The position relative to top is set to 60.</p>
<canvas id="positiontopcanvas"></canvas>
<script>
var canvas = new fabric.Canvas('positiontopcanvas');
var circle4 = new fabric.Circle( {
radius: 70,
top: 60
});
canvas.add(circle4);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(500);
</script>
</body>
</html>
This code will create a new circle canvas element with the specified ID, create a new Fabric.js Class Circle object and set the position relative to the top of a canvas circle using the top property and add the circle object to the canvas. Here, we defined the top x-coordinate as 60 pixels from the top edge of the canvas circle.
Example
Let us see another example where we can set the position relative to the top of a canvas circle by using the top property, and parameters like top, radius, stroke, and fill.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Setting the position relative to top of a canvas circle</h2>
<p>You can select the textbox to see the controlling corners.</p>
<p>The position realtive to top is set to 50.</p>
<canvas id="topcanvas"></canvas>
<script>
var canvas = new fabric.Canvas('topcanvas');
var circle5 = new fabric.Circle({
fill: 'red',
stroke: 'blue',
radius: 70,
top: 50
});
canvas.add(circle5);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(400);
</script>
</body>
</html>
This code will create a new circle canvas element with the specified ID and dimensions, create a new Fabric.js Class Circle object and set the position relative to top of a canvas circle using top property, and add the circle class object to the canvas. The circle will appear on the canvas with a dimensions as we defined in the example.
The Top property is used to set the position vertically of the circle relative to top of the canvas. On the other hand, the left property is used to set the position horizontally of the circle relative to left of the canvas.
Conclusion
In this article, we have demonstrated how to set the position relative to the top of a canvas circle along with examples. We have seen the two different examples here, we used the top property for setting the position relative to top of a circle canvas. In the first example, we used the ‘top’ property for setting it to the position relative to the top of a canvas circle. For the second example, we used the top property and various dimensions’ parameters like top, fill, radius, and stroke for setting the position relative to the top.
332 Views
