Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a Rectangle with dash pattern border using FabricJS?
In this tutorial, we are going to create a rectangle with a dash pattern border using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we will have to create an instance of fabric.Rect class and add it to the canvas.
We can change the appearance of the dashes of border, by using the borderDashArray property. However, our rectangle 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.Rect({ borderDashArray: Array }: Object)Parameters
options (optional) − This parameter is an Object which provides additional customizations to our rectangle. 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 borderDashArray is a property.
Options keys
borderDashArray − This property accepts an Array which specifies the dash pattern by stating intervals via an array.
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 followed by a 10px gap.
<!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>Select the rectangle 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 rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "rgb(128,0,128)",
borderDashArray: [7, 10],
padding: 9,
});
// Add it to the canvas
canvas.add(rect);
</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>Select the rectangle 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 rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "rgb(128,0,128)",
borderDashArray: [7, 10],
padding: 9,
hasBorders: false,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
342 Views
