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
FabricJS – How to set the stroke colour of the controlling corners of a Line?
In this tutorial, we are going to learn about how to set the stroke colour of controlling corners of Line using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled.
We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. The cornerStrokeColor property allows us to set the stroke colour for controlling corners of an object.
Syntax
new fabric.Line(points: Array, { cornerStrokeColor: String }: Object)
Parameters
-
points? This parameter accepts an Array of points which determines the (x1, y1) and (x2, y2) values, those being the x- and y-axis coordinates of the start and end of the line respectively. -
options(optional) ? This parameter is an Object which provides additional customizations to our object. Using this parameter origin, stroke width and a lot of other properties can be changed related to the line object of whichcornerStrokeColoris a property.
Options Keys
-
cornerStrokeColor? The property accepts a String value which determines the stroke colour of controlling corners.
Example: Using cornerStrokeColor with Color Name
Let's see a code example to change the stroke colour of controlling corners of an object. Here, we have passed the cornerStrokeColor the value as "red". This will make sure that the stroke of our controlling corners appears to be red now.
<!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 cornerStrokeColor as key with a Colour name as value</h2>
<p>
You can select the line object to see the stroke colour of controlling corners
</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 Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
cornerStrokeColor: "red"
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
Example: Understanding cornerColor vs cornerStrokeColor
As we can see from this example, when transparentCorners is set to false, cornerStrokeColor only changes the stroke colour while cornerColor property determines the fill colour of the controlling corners itself.
<!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>Disabling transparentCorners property to understand the difference between cornerColor and cornerStrokeColor</h2>
<p>
You can select the line object to see the difference between cornerStrokeColor and cornerColor
</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 Line object
var line1 = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
transparentCorners: false,
cornerColor: "red"
});
// Initiate another Line object
var line2 = new fabric.Line([300, 100, 500, 40], {
stroke: "green",
strokeWidth: 20,
transparentCorners: false,
cornerStrokeColor: "red"
});
// Add them to the canvas
canvas.add(line1);
canvas.add(line2);
</script>
</body>
</html>
Key Differences
| Property | Purpose | Effect |
|---|---|---|
cornerColor |
Fill color of corners | Changes the background color of control corners |
cornerStrokeColor |
Border color of corners | Changes the outline color of control corners |
Conclusion
The cornerStrokeColor property in FabricJS allows you to customize the border color of object control corners. Use it alongside cornerColor and transparentCorners properties for complete corner customization.
272 Views
