Fabric.js | Text strokeDashArray Property

Last Updated : 06 Sep, 2021

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 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 text. After this, we will initialize instances of Canvas and Text 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 Text as given in the below example.

Syntax:

fabric.text(text: string, strokeDashArray: Array, stroke);

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

text: This parameter specifies the text.
strokeDashArray: This parameter defines the pattern of stroke.
stroke: This parameter defines the stroke color.

Example: This example uses FabricJS to add stroke dashed pattern to the text canvas as given below.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Fabric.js | Text strokeDashArray Property
    </title>
   
    <!-- Loading the FabricJS library -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
    </script>
</head>
 
<body>
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
 
        <b>
            Add stroke dash pattern to 
            canvas-like text with JavaScript
        </b>
 
        <canvas id="canvas" width="600" height="200"
            style="border:1px solid #000000;">
        </canvas>
 
        <script>
           
            // Create a new instance of Canvas
            var canvas = new fabric.Canvas("canvas");
 
            // Create a new Text instance
            var text = new fabric.Text('GeeksforGeeks', {
                strokeDashArray: [5],
                stroke: 'red'
            });
 
            // Render the text on Canvas
            canvas.add(text);
        </script>
    </center>
</body>
 
</html>