Open In App

Fabric.js | Ellipse borderDashArray Property

Last Updated : 19 May, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to see how to set the dash pattern of the border of canvas ellipse using FabricJS. The canvas means ellipse is movable and can be stretched according to requirement. Further, the ellipse can be customized when it comes to initial stroke color, fill color, stroke width, or radius.

To make it possible, we are going to use a JavaScript library called FabricJS. After importing the library using CDN, we will create a canvas block in the body tag which will contain our ellipse. After this, we will initialize instances of Canvas and Ellipse provided by FabricJS and set the dash pattern of the border of canvas ellipse using borderDashArray property and render the Ellipse on the Canvas as given in the below example.

Syntax:

fabric.Ellipse({
    rx: number,
    ry: number,
    borderDashArray: array
}); 

Parameters: This function accept three parameters as mentioned above and described below:

  • rx: This parameter defines the horizontal radius.
  • ry: This parameter defines the vertical radius.
  • borderDashArray: This parameter defines the dash pattern of border.

Program: This example uses FabricJS to set the dashed pattern of the border of a canvas-like ellipse as given below. Note that you have to click on the ellipse to see the border.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Fabric.js | Ellipse borderDashArray Property
    </title>
  
    <!-- Loading the FabricJS library -->
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <b>
            Set the dash pattern of border of 
            canvas-type ellipse with JavaScript
        </b>
        <canvas id="canvas" width="600" height="200" 
            style="border:1px solid #000000">
        </canvas>
    </center>
  
    <script>
  
        // Initiate a Canvas instance
        var canvas = new fabric.Canvas("canvas");
  
        // Initiate a Ellipse instance
        var ellipse = new fabric.Ellipse({
            rx: 80,
            ry: 40,
            borderDashArray: [10]
        });
  
        // Render the Ellipse in canvas
        canvas.add(ellipse);
    </script>
</body>
  
</html>


Output:



Similar Reads

Fabric.js Path borderDashArray Property
In this article, we are going to see how to set the borderDashArray of a Path using Fabric.js. The Path in Fabric.js is movable and can be stretched according to requirements. Further, the Path can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To make it possible we are going to use a JavaScript li
2 min read
Fabric.js Itext borderDashArray Property
In this article, we will be using the borderDashArray property that is used to set the dash pattern of the border in a canvas Itext. Fabric.js is a JavaScript library that is used to work with canvas. The canvas Itext is one of the class of fabric.js that is used to create Itext instances. The canvas Itext means the Itext is movable and can be stre
2 min read
Fabric.js | Circle borderDashArray Property
In this article, we are going to see how to make a dashed border pattern on a canvas circle using FabricJS. The canvas means the circle is movable and can be stretched according to requirement. Further, the circle can be customized when it comes to initial stroke color, fill color, stroke width, or radius. Approach: To make it possible we are going
2 min read
Fabric.js | Rect borderDashArray Property
In this article, we are going to see how to set the dash pattern of the border of the canvas rectangle using FabricJS. The canvas rectangle means rectangle is movable and can be stretched according to requirement. Further, the rectangle can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. Approach: To
2 min read
Fabric.js | Triangle borderDashArray Property
In this article, we are going to see how to set the dash pattern of the border of the canvas triangle using FabricJS. The canvas triangle means the triangle is movable and can be stretched according to requirement. Further, the triangle can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To make it p
2 min read
Fabric.js Polygon borderDashArray Property
In this article, we are going to see how to set the dash pattern of the border of the canvas polygon using FabricJS. The canvas polygon means the polygon is movable and can be stretched according to requirement. Further, the polygon can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To make it possi
3 min read
Fabric.js Polyline borderDashArray Property
In this article, we are going to see how to set the dash pattern of the border of the canvas polyline using FabricJS. The canvas polyline means the polyline is movable and can be stretched according to requirement. Further, the polyline can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To make it p
2 min read
Fabric.js Textbox borderDashArray Property
In this article, we are going to see how to set the dash pattern of the border of canvas Textbox using FabricJS. The canvas means Textbox is movable and can be stretched according to requirement. Further, the Textbox can be customized when it comes to initial stroke color, fill color, stroke width, or radius. Approach: To make it possible, we are g
2 min read
Fabric.js line borderDashArray Property
In this article, we are going to see how to set the dash pattern of the border of the canvas line using FabricJS. The canvas line means the line is movable and can be stretched according to requirement. Further, the line can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. Syntax: fabric.line({ border
2 min read
Fabric.js Group borderDashArray Property
In this article, we are going to see how to set the borderDashArray of a Group canvas using Fabric.js. The Group in Fabric.js is movable and can be stretched according to requirements. Further, the Group can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. Approach: To make it possible we are going to
2 min read