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 >
< 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 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 >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...