Home > Article > Web Front-end > How to set the position of an ellipse from the left using FabricJS?
How to set the position of an ellipse from the left using FabricJS?
- WBOYforward
- 2023-09-14 19:37:021207browse
In this tutorial, we will learn how to set the position of an ellipse from the left using FabricJS. The oval is one of the various shapes provided by FabricJS. To create an ellipse, we will create an instance of the Fabric.Ellipse class and add it to the canvas. We can manipulate the ellipse object by changing its position, opacity, stroke, and its size. The position from the left can be changed using the left property.
Syntax
new fabric.Ellipse( { left: Number }: Object)Parameters
Options (optional) - This parameter is a Object Provides additional customization for our ellipse. Use this parameter to change the color, cursor, stroke width, and many other properties associated with the object whose left property is the property.
Option Key
left - This property accepts a Number , which sets the left position of the object. This value determines how far to the left the object will be placed.
Example 1
Default position of the ellipse object
Let us use an example to understand the position of the ellipse object. The default position in the canvas when changed.
<!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 the position of an Ellipse from left using FabricJS</h2>
<p>This is the default position, as we have not used the <b>left</b> property. </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({
fill: "white",
rx: 80,
ry: 50,
stroke: "black",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Example 2
Passing the left attribute as key
In this example we will assign leftProperties with custom values. Since it accepts digits, you have to assign it a numeric value that represents its position from the left.
<!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 set the position of Ellipse from left using FabricJS?</h2>
<p>Notice that the circle is placed 135px away from the left, since we have used the <b>left</b> property with a custom value.</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: 135,
fill: "white",
rx: 80,
ry: 50,
stroke: "black",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>The above is the detailed content of How to set the position of an ellipse from the left using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!