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 the controlling corners of a Circle using FabricJS?
In this tutorial, we are going to set the colour of controlling corners of Circle using FabricJS. The cornerColor property allows us to manipulate the colour of the controlling corners when the object is active.
Syntax
new fabric.Circle({ cornerColor: String }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our circle. 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.
Example 1: Using Color Names
Let's see an example to change the colour by using the cornerColor property. In this case, we have assigned the value "black" to the key which makes the controlling corners appear black.
<!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>Setting the colour of controlling corners of circle using FabricJS</h2>
<p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> property to set the corners black.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
cornerColor: "black"
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Using RGB Values
Instead of passing a simple colour name as the String value to the key, we can also assign an RGB value. Let us see an 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>Setting the colour of controlling corners of circle using FabricJS</h2>
<p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> and assigned it an "rgb" value to set the corners purple.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
cornerColor: "rgb(255,20,147)"
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
- The cornerColor property only affects corners when the circle is selected
- You can use color names like "red", "blue", "black" or RGB/hex values
- This property works alongside other styling properties like borderColor and strokeWidth
- The controlling corners appear when you click and select the circle object
Conclusion
The cornerColor property in FabricJS provides an easy way to customize the appearance of controlling corners for circle objects. You can use standard color names or RGB values to match your design requirements.
241 Views
