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 horizontal skew of a canvas circle using Fabric.js?
The Fabric.js Circle class 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 horizontal skew of a canvas circle can be done using skewX property. The skewX property of a Fabric.js class specifies the horizontal skew of a circle. It can be used to make or set the circle to horizontal.
Syntax
The following is the syntax for the text object −
fabric.Circle(radiu: number, skewX: number);
Parameter
radius − Used to specify radius of the circle
skewX − Specify the horizontal skew of the circle.
Steps
Follow the below-given steps to set the horizontal skew of a canvas circle using Fabric.js −
Step 1 − Include the Fabric.js library in your HTML file
Step 2 − Creating a new canvas element in your HTML file
Step 3 − Initializing the canvas element in your code of JavaScript
Step 4 − Create a new Fabric.js Circle Class object and set the skewX property to the desired circle value
Step 5 − Adding the circle object to the canvas
Example
Let us see how can we set the horizontal skew 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 Horizontal Skew of a Canvas Circle using the Fabric.js</h2>
<p>Select the textbox to see the controlling corners.</p>
<p>Skew of the canvas circle is set to 40.</p>
<canvas id="skiewcanvas"></canvas>
<script>
var canvas = new fabric.Canvas('skiewcanvas');
var circle = new fabric.Circle({
top: 50,
left: 50,
radius: 100,
skewX: 40
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(450);
</script>
</body>
</html>
This code will create a new canvas circle element with the specified ID, create a new Fabric.js Circle Class object and set the horizontal skew for the circle using the skewX property and add the circle object to the canvas. The circle will appear on the canvas with a horizontal skew.
Example
Let us see another example where we can set the horizontal skew of a canvas circle by using the setSkew method, and properties like left, top, fill, radius, stroke, and strokeWidth.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Setting the Horizontal Skiew of a Canvas Circle</h2>
<p>Select the textbox to see the controlling corners.</p>
<canvas id="setskiewcanvas" width="600" height="300"></canvas>
<script>
var canvas = new fabric.Canvas('setskiewcanvas');
var circle = new fabric.Circle({
left: 115,
top: 50,
fill: "blue",
radius: 50,
stroke: "grey",
strokeWidth: 5
});
canvas.add(circle);
circle.setSkewX(40);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
This code will create a new canvas circle element with the specified ID and dimensions, create a new Fabric.js Circle Class object and set the canvas circle to horizontal skew using setSkew method, and add the class object to the canvas. The circle will appear on the canvas with dimensions as we defined in the example.
Conclusion
In this article, we have demonstrated how to set the horizontal skew of a canvas circle along with examples. We have seen the two different examples here, we used the skewX property and setSkew method for setting the horizontal skew of a circle canvas. In the first example, we used the ‘skewX’ property to change it to the horizontal skew. For the second example, we used the setSkew( ) method and various dimensions parameters like left, top, fill, etc., for setting the horizontal skew of a circle.
85 Views
