In this article, we are going to see how to add stroke width 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 width. Further, the text itself cannot be edited like a textbox.
fabric.text(text :string, strokeWidth: number, stroke);
Parameters: This function accepts three parameters as mentioned above and described below:
- text: It specifies the text.
- strokeWidth: It specifies the amount of width of stroke.
- stroke: It specifies the stroke color.
Program: This example uses FabricJS to add stroke width of canvas-like text as given below.
- How to set stroke width of a canvas circle using Fabric.js ?
- CSS | stroke-width Property
- HTML | canvas stroke() Method
- Fabric.js | Text stroke Property
- HTML | <canvas> width Attribute
- Web HTMLCanvasElement API | Canvas Element width property
- HTML | canvas ImageData width Property
- How to set opacity of a text canvas using Fabric.js ?
- How to Create Text on Canvas using Fabric.js ?
- How to add overline to a text canvas using Fabric.js ?
- How to rotate a text canvas using Fabric.js ?
- How to vertically flip a text canvas using Fabric.js ?
- How to Horizontally Flip a Text Canvas using Fabric.js ?
- How to position relative to top of a text canvas using Fabric.js ?
- How to add underline to canvas-type text using Fabric.js ?
- How to disable the modification of text canvas using Fabric.js ?
- How to add a linethrough to a canvas-type text using Fabric.js ?
- How to sharpen blurry text in HTML5 canvas?
- How to Create a Curve Text using CSS3/Canvas ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.