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 set the dash pattern of controlling corners of Text using FabricJS?
In this tutorial, we are going to learn how we can implement the dash pattern of controlling corners of Text using FabricJS. The controlling corners of an object allow us to scale, stretch or change its position. We can customize our controlling corners in many ways such as adding a specific colour to it, changing its size etc. We can also specify a dash pattern for the controlling corners by using the cornerDashArray property.
Syntax
new fabric.Text(text: String, { cornerDashArray: Array }: Object)
Parameters
text ? This parameter accepts a String which is the text string that we want to display.
options (optional) ? This parameter is an Object which provides additional customizations to our text. Using this parameter colour, cursor, stroke width and a lot of other properties can be changed related to the object of which cornerDashArray is a property.
Options Keys
cornerDashArray ? This property accepts an Array which allows us to specify a dash pattern for the controlling corners. For example, if we pass an array with values [2,3], it means a dash pattern of 2px dash and 3px gap and repeating this pattern infinitely.
Example 1: Default Appearance of Controlling Corners
Let's see a code example that depicts the default appearance of the controlling corners of a text object. Since we have not used the cornerDashArray 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 controlling corners</h2>
<p>You can select the text object to see the default appearance of controlling corners</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 text object
var text = new fabric.Text("Add Sample Text Here", {
width: 200,
top: 70,
left: 50,
cornerColor: "#87a96b",
});
// Add it to the canvas
canvas.add(text);
</script>
</body>
</html>
Example 2: Using cornerDashArray Property
In this example, we are passing the cornerDashArray property a value of [1,2,1]. This means that a dash pattern will be created such that there is a 1px long line, followed by a 2px gap, then again a 1px long line will be drawn and after which a 1px gap will be made 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 cornerDashArray property as key</h2>
<p>You can select the text object to see the dash pattern of controlling corners</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 text object
var text = new fabric.Text("Add Sample Text Here", {
top: 70,
left: 50,
cornerColor: "#87a96b",
cornerDashArray: [1, 2, 1],
});
// Add it to the canvas
canvas.add(text);
</script>
</body>
</html>
How Dash Patterns Work
The cornerDashArray property accepts an array of numbers that define the dash and gap lengths in pixels:
- [5, 5] - Creates 5px dashes with 5px gaps
- [2, 3] - Creates 2px dashes with 3px gaps
- [1, 2, 1] - Creates a pattern: 1px dash, 2px gap, 1px dash, 1px gap (repeating)
- [10, 2, 5, 2] - Creates alternating long and short dashes with uniform gaps
Key Points
- The cornerDashArray property only affects the visual appearance of control corners, not their functionality
- Combine with cornerColor property to create visually distinct control corners
- The pattern repeats infinitely along the corner border
- Empty array [] or null removes any dash pattern (default behavior)
Conclusion
The cornerDashArray property in FabricJS provides a simple way to customize the visual appearance of text object control corners with dashed patterns. This enhances the visual design and helps distinguish different objects on the canvas.
210 Views
