Skip to content
Related Articles

Related Articles

Improve Article

Fabric.js | Text strokeDashArray Property

  • Last Updated : 13 May, 2020

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.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Fabric.js | Text strokeDashArray Property
    </title>
    
    <!-- Loading the FabricJS library -->
    <script src=
    </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 instace 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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :