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 create a Triangle with background colour using FabricJS?
In this tutorial, we are going to create a Triangle with background colour 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.
The backgroundColor property allows us to assign a colour to our object's background. It is the colour of the container where the Triangle lives and is rectangular in shape for the triangle.
Syntax
new fabric.Triangle({ backgroundColor: 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 Triangle of which backgroundColor is a property.
Options Keys
-
backgroundColor ? This property accepts a value of type String which will determine the background colour.
Example 1: Using Hexadecimal Color Value
Let's see a code example to assign a background colour to our Triangle object using a hexadecimal value of colour. In this example, we have used the hex colour code #ff0000 which represents the colour red.
<!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>Triangle with Hexadecimal Background Color</h2>
<p>You can see the red background colour behind the triangle</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(300);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 55,
top: 60,
width: 100,
height: 70,
fill: "blue",
stroke: "#2a52be",
backgroundColor: "#ff0000",
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Using RGBA Color Value
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 rgba(255,20,147,0.8) which is the colour pink 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>Triangle with RGBA Background Color</h2>
<p>You can see the pink background colour with transparency behind the triangle</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(300);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 55,
top: 60,
width: 100,
height: 70,
fill: "#deb887",
backgroundColor: "rgba(255,20,147,0.8)",
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Key Points
- The
backgroundColorproperty creates a rectangular background behind the triangle shape - You can use hexadecimal color codes (like #ff0000) for solid colors
- RGBA values allow you to control transparency with the alpha channel
- The background color appears as a container behind the triangle, not filling the triangle itself
Conclusion
The backgroundColor property in FabricJS provides an easy way to add colored backgrounds to triangle objects. You can use either hexadecimal or RGBA color values to achieve the desired visual effect for your canvas applications.
242 Views
