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 Triangle with dash pattern border using FabricJS?
In this tutorial, we are going to create a triangle with a dash pattern border using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of fabric.Triangle class and add it to the canvas.
We can change the appearance of the dashes of border, by using the borderDashArray property. However, our triangle 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.Triangle({ borderDashArray: Array }: Object)Parameters
Options (optional) − This parameter is an Object which provides additional customizations to our triangle. 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 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>Select the triangle 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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 60,
width: 100,
height: 70,
fill: "#deb887",
borderColor: "red",
borderDashArray: [7, 10],
});
// Add it to the canvas
canvas.add(triangle);
</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 triangle and observe that its 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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 60,
width: 100,
height: 70,
fill: "#deb887",
borderColor: "red",
borderDashArray: [7, 10],
hasBorders: false,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
168 Views
