Skip to content
Related Articles

Related Articles

Fabric.js | Text strokeDashArray Property

Improve Article
Save Article
  • Last Updated : 06 Sep, 2021
Improve Article
Save Article

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.


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. 


<!DOCTYPE html>
        Fabric.js | Text strokeDashArray Property
    <!-- Loading the FabricJS library -->
    <script src=
        <h1 style="color: green;">GeeksforGeeks</h1>
            Add stroke dash pattern to
            canvas-like text with JavaScript
        <canvas id="canvas" width="600" height="200"
            style="border:1px solid #000000;">
            // 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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!