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
Add Stroke to a Triangle Using Fabric.js
In this tutorial, we are going to learn how to add stroke to a Triangle 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.
Our triangle object can be customized in various ways like changing its dimensions, adding a background colour or by changing the colour of the line drawn around the object. We can do this by using the stroke property.
Syntax
new fabric.Triangle({ stroke : String }: 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 stroke is a property.
Options Keys
Stroke This property accepts a String which determines the colour of that object's border.
Example 1
Passing stroke as key with a hexadecimal value
Let's see a code example to understand how our triangle object appears when the stroke property is used. A hexadecimal colour code starts with a "#" followed by a six-digit number representing a colour. In this case, we have used "#3cb371" which is the colour medium sea-green.
<!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 stroke as key with a hexadecimal value</h2>
<p>You can see that the stroke around the triangle is of medium sea-green colour</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: 120,
top: 30,
width: 90,
height: 80,
fill: "#ecebbd",
stroke: "#3cb371",
strokeWidth: 7,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2
Passing an rgba value to the stroke property
In this example, we will see how to assign an rgba value to the stroke property. We can use an RGBA value, instead of a hexadecimal colour code, which stands for: red, green, blue and alpha. The alpha parameter specifies the opacity of a colour. In this example, we have used the rgba value (46,139,87,0.8) which is the colour sea-green with 0.8 opacity.
<!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 an rgba value to the stroke property</h2>
<p>You can see that the stroke colour is coming from the RGBA value 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 triangle object
var triangle = new fabric.Triangle({
left: 120,
top: 30,
width: 90,
height: 80,
fill: "#ecebbd",
stroke: "rgba(46,139,87,0.8)",
strokeWidth: 7,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
142 Views
