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 color of a selection area on a canvas using FabricJS?
In this article, we are going to learn how to set the color of a selection area on a canvas using FabricJS. We can adjust the color using the selectionColor property.
Syntax
new fabric.Canvas(element: HTMLElement|String, { selectionColor: String }: Object)
Parameters
-
element ? This parameter is the <canvas> element itself which can be derived using document.getElementById() or the id of the <canvas> element itself. The FabricJS canvas will be initialized on this element.
-
options (optional) ? This parameter is an Object which provides additional customizations to our canvas. Using this parameter, properties such as color, cursor, border width and a lot of other properties can be changed related to the canvas, of which selectionColor is a property with which we can indicate the color of the selection. The default value of selectionColor is rgba(100,100,255,0.3).
Example 1: Using RGBA Value
Passing the selectionColor key to the class
The selectionColor property accepts a String which determines the color of the selection. We can use an RGBA value which stands for: red, blue, green and alpha. The alpha parameter specifies the opacity of a color. Let's see a code example of how we can set the color of a selection area in canvas using FabricJS.
<!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 color of a selection area using FabricJs</h2>
<p>Select an area around the object to see the color of the selection area.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionColor: "rgba(0,0,0,0.4)",
});
// Creating an instance of the fabric.Rect class
var rect = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#006400",
angle: 90,
});
// Adding it to the canvas
canvas.add(rect);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Using Color Name
Using a color name instead of an RGBA value
We can also use a specific color instead of using an RGBA value. In this example, the selectionColor property has been set to the color "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>Setting the color of a selection area using FabricJs</h2>
<p>Select an area around the object to see the color of the selection area.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionColor: "red",
});
// Creating an instance of the fabric.Rect class
var rect = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#006400",
angle: 90,
});
// Adding it to the canvas
canvas.add(rect);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
- The
selectionColorproperty controls the color of the selection area when dragging to select objects - Accepts both RGBA values for custom transparency and standard color names
- Default value is
rgba(100,100,255,0.3)which provides a light blue semi-transparent selection - The selection area appears when you click and drag on the canvas to select multiple objects
Conclusion
The selectionColor property in FabricJS allows you to customize the appearance of the selection area. You can use RGBA values for precise control over transparency or simple color names for basic styling.
943 Views
