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 like a textbox.
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 Polygon. After this, we will initialize instances of Canvas and Polygon provided by FabricJS and create a stroke using stroke property and further use the strokeDashArray property to add stroke dash pattern and render the Canvas on the Polygon as given in the below example.
Syntax:
fabric.Polygon([
{ x: pixel, y: pixel },
{ x: pixel, y: pixel },
{ x: pixel, y: pixel},
{ x: pixel, y: pixel},
{ x: pixel, y: pixel }],
{
strokeDashArray : Array
}
);
Parameters: This property accepts a single value as an array mentioned above and described below:
- Array: It specifies the stroke dash pattern.
Below example illustrate the Fabric.js strokeDashArray:
Example:
HTML
<!DOCTYPE html> <html>   <head>     <!-- Loading the FabricJS library -->    <script src=     </script> </head>   <body>     <div style="text-align: center;width: 600px;">         <h1 style="color: green;">             neveropen         </h1>         <b>             Fabric.js | Polygon strokeDashArray Property         </b>     </div>       <canvas id="canvas" width="600" height="200"         style="border:1px solid #000000;">     </canvas>       <script>                   // Initiate a Canvas instance         var canvas = new fabric.Canvas("canvas");           // Initiate a polygon instance         var polygon = new fabric.Polygon([{             x: 295,             y: 10         }, {             x: 235,             y: 198         }, {             x: 385,             y: 78         }, {             x: 205,             y: 78         }, {             x: 355,             y: 198         }], {             stroke: 'green',             strokeDashArray: [10]         });           // Render the polygon in canvas         canvas.add(polygon);     </script> </body>   </html> |
Output:
