Fabric.js line strokeDashArray Property Last Updated : 22 Jan, 2021 Comments Improve Suggest changes Like Article Like Report In this article, we are going to use strokeDashArray property to set the dash pattern of the stroke color in the canvas line in 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. To make this possible we are going to use a JavaScript HTML5 canvas library called FabricJS. After importing the library, we will create a canvas block in the body tag which will contain the line. After this, we will initialize instances of Canvas and line provided by FabricJS and set the dash pattern of the stroke color in the canvas line using strokeDashArray Property, and render the line on the Canvas as given below. Syntax: fabric.line({ strokeDashArray : array }); Parameters: This property accepts a single parameter as mentioned above and described below: strokeDashArray : It specifies the dash pattern of the stroke color in the canvas line. It contains a array value. Example1: HTML <!DOCTYPE html> <html> <head> <script src= "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> </script> </head> <body> <h1>fabric.js | line strokeDashArray property</h1> <canvas id="canvas" width="600" height="200" style="border:1px solid #000000;"> </canvas> <script> var canvas = new fabric.Canvas("canvas"); var line = new fabric.Line([150, 10, 220, 150], { stroke: 'red', strokeDashArray: [10] }); canvas.add(line); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article Fabric.js line stroke Property T taran910 Follow Improve Article Tags : JavaScript Fabric.js Similar Reads Fabric.js Polyline strokeDashArray Property In this article, we are going to see how to set the stroke dash pattern of a canvas Polyline using Fabric.js. The Polyline in Fabric.js 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, 2 min read Fabric.js Polygon strokeDashArray Property In this article, we are going to see how to add a stroke dash pattern to the Polygon canvas using FabricJS. The canvas means Polygon written is movable, rotatable, resizable, and can be stretched. But in this article, we will add a stroke dash pattern. Further, the Polygon itself cannot be edited li 2 min read Fabric.js Path strokeDashArray Property In this article, we are going to see how to set the strokeDashArray 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 ma 2 min read Fabric.js line stroke Property In this article, we are going to use stroke property to set the stroke color of the canvas line in 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, 2 min read Fabric.js | Rect strokeDashArray Property In this article, we are going to see how to set the stroke dash pattern of a 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, 2 min read Fabric.js | Text strokeDashArray Property In this article, we are going to see how to add a stroke dash pattern to the text canvas using FabricJS. The canvas means text written is movable, rotatable, resizable, and can be stretched. But in this article, we will add a stroke dash pattern. Further, the text itself cannot be edited like a text 2 min read Like