Home > Article > Web Front-end > How to set the height of an ellipse using FabricJS?
In this tutorial, we will learn how to set the height of an ellipse 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. FabricJS allows us to control the size of objects using the width and height properties.
new fabric.Ellipse({ height: Number }: Object)
Options (optional) - This parameter is a Object Provides additional customization for our ellipse. Using this parameter, you can change the color, cursor, stroke width, and many other properties associated with objects whose height is the property.
Height - This property accepts numbers strong> Allows us to specify the height of the object. The assigned value determines the height.
height Default behavior of the property
Let’s take an example to understand height The default behavior of the property.
<!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 height of an Ellipse using FabricJS?</h2> <p>Here we have set the dimensions of the ellipse by passing the horizonal and vertical radius, <b>rx</b> and <b>ry</b>. 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"); // Initiate an ellipse instance var ellipse = new fabric.Ellipse({ left: 100, top: 100, fill: "white", rx: 100, ry: 60, stroke: "#c154c1", strokeWidth: 5, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Pass the height property as key
Since the size of the ellipse is determined by its horizontal and vertical radius, there will be no change in its size.
<!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 height of an Ellipse using FabricJS?</h2> <p>There is no change in the dimensions of the ellipse even though we have used the <b>height</b> property. This is because the dimensions are controlled by the horizontal and vertical radius, <b>rx</b> and <b>ry</b>. </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({ top: 100, left: 100, fill: "white", rx: 100, ry: 60, height: 90, stroke: "#c154c1", 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 height of an ellipse using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!