Fabric.js | Text strokeDashArray Property
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;" >w3wiki</ 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('w3wiki', { strokeDashArray: [5], stroke: 'red' }); // Render the text on Canvas canvas.add(text); </ script > </ center > </ body > </ html > |
Output:
Contact Us