Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Textbox with Dash Pattern Border using Fabric.js
In this tutorial, we are going to create a Textbox with a dash pattern border 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. We can change the appearance of the dashes of border, by using the borderDashArray property. However, our textbox object must have borders in order for this property to work. If the hasBorders property is assigned a false value, this property will not work.
Syntax
new fabric.Textbox(text: String, { borderDashArray: 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 colour, cursor, stroke width and a lot of other properties can be changed related to the object of which borderDashArray is a property.
Options Keys
borderDashArray This property accepts an Array which specifies the dash pattern by stating intervals via an array. 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
Passing borderDashArray as key with a custom value
Let’s see a code example to create a dash pattern border using borderDashArray property in FabricJS. In this example, we have used a [7,10] array which tells us that the pattern will be created by drawing a 7px long line and followed by a 10px gap and repeating this same pattern over and over.
<!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 borderDashArray as key with a custom value</h2>
<p>You can select the textbox to see the dash pattern</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("Grow through what you go through.", {
backgroundColor: "#ffe5b4",
width: 400,
top: 70,
left: 110,
angle: 15,
borderColor: "red",
borderDashArray: [7, 10],
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Example 2
Passing hasBorders key with the value "false"
As we can see in this example, even though we have assigned the properties borderColor and borderDashArray proper values, they don’t work since the hasBorders property has been set to false. When set to false, the borders of an object are not rendered.
<!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 hasBorders key with the value "false"</h2>
<p>You can select the textbox to see that the borders have not been rendered</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("Grow through what you go through.", {
backgroundColor: "#ffe5b4",
width: 400,
top: 70,
left: 110,
angle: 15,
borderColor: "red",
borderDashArray: [7, 10],
hasBorders: false,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
402 Views
