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 set the colour of controlling corners of a Triangle using FabricJS?
In this tutorial, we are going to set the colour of the controlling corners of Triangle using FabricJS. The cornerColor property allows us to manipulate the colour of the controlling corners when the object is active.
Syntax
new fabric.Triangle({ cornerColor: 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 the cornerColor is a property.
Options Keys
-
cornerColor ? This property accepts a String which allows us to assign a color to the controlling corners when the object is actively selected. The default value is rgb(178,204,255).
Example 1: Using Color Names
Let's see a code example to change the colour by using the cornerColor property. In this case, we have assigned the value "orange" to the key which thus makes the controlling corners appear orange.
<!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 cornerColor as key with a color name as value</h2>
<p>Select the triangle to see the corner colour is orange</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: "#5f9ea0",
cornerColor: "orange",
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Using RGBA Values
Instead of passing a simple colour name as the String value to the key, we can also assign an RGBA value. RGBA stands for red, green, blue and alpha where alpha is the opacity. Let us see a code example of how we can do that:
<!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>Assigning an RGBA value to the cornerColor property</h2>
<p>Select the triangle to see the corner colour applied using RGBA value</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: "#5f9ea0",
cornerColor: "rgba(255,103,0,0.9)",
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Supported Color Formats
The cornerColor property accepts various color formats:
- Color names: "red", "blue", "orange", "green"
- Hex values: "#ff0000", "#00ff00"
- RGB values: "rgb(255, 0, 0)"
- RGBA values: "rgba(255, 0, 0, 0.5)"
Conclusion
The cornerColor property in FabricJS allows you to customize the appearance of triangle control corners when selected. You can use color names, hex values, RGB, or RGBA formats to achieve the desired visual effect.
183 Views
