Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add dashed stroke to a Textbox using FabricJS?
In this tutorial, we are going to learn how to add a dashed stroke to a Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. The strokeDashArray property allows us to specify a dash pattern for the object's stroke.
Syntax
new fabric.Textbox(text: String, { strokeDashArray: Array }: Object)
Parameters
-
text ? This parameter accepts a String which is the text string that we want to display inside our textbox.
-
options(optional) ? This parameter is an Object which provides additional customizations to our textbox. Using this parameter, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the object of which strokeDashArray is a property.
strokeDashArray Property
The strokeDashArray property accepts an Array which allows us to specify a dash pattern for the object's stroke. For example, if we pass an array with the values [2,3], it means a dash pattern of 2px dash and 3px gap, repeating this pattern infinitely.
Example 1: Default Stroke Appearance
Let's see a code example that depicts the default appearance of the stroke of a textbox object. Since we have not used the strokeDashArray property, there is no dash pattern being displayed.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Default appearance of an object's stroke</h2>
<p>You can see there is no dash pattern in the stroke</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a textbox object
var textbox = new fabric.Textbox("Stay foolish to stay sane", {
backgroundColor: "#e3dac9",
width: 400,
top: 70,
left: 65,
fill: "green",
stroke: "black",
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Example 2: Adding Dashed Stroke Pattern
In this example, we are passing the strokeDashArray property a value of [9,2]. This means that a dash pattern will be created such that there is a 9px long line, followed by a 2px gap, then again a 9px long line will be drawn, and so on.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Passing strokeDashArray property as key</h2>
<p>You can see there is a dash pattern in the stroke now</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a textbox object
var textbox = new fabric.Textbox("Stay foolish to stay sane", {
backgroundColor: "#e3dac9",
width: 400,
top: 70,
left: 65,
fill: "green",
stroke: "red",
strokeDashArray: [9, 2],
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Common Dash Patterns
Here are some common strokeDashArray patterns you can use:
- [5, 5] - Equal dash and gap lengths
- [10, 3] - Long dash with short gap
- [2, 8] - Short dash with long gap
- [5, 3, 2, 3] - Complex pattern with varying lengths
Conclusion
The strokeDashArray property in FabricJS provides an easy way to create dashed stroke patterns for textbox objects. By passing different array values, you can create various dash patterns to enhance the visual appearance of your text elements.
267 Views
