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 move a Line object one step down in the stack of drawn objects?
In this tutorial, we are going to learn about how to move a Line object one step down in the stack of drawn objects 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. In order to move a Line object one step down in the stack of drawn objects, we use the sendBackwards method.
Syntax
sendBackwards(intersecting: Boolean): fabric.Object
Parameters
-
intersecting ? This parameter accepts a Boolean value which when assigned a 'true' value, sends the object behind the next lower intersecting object. In case of 'false' value, it normally sends the object behind the next object in stack. This parameter is optional.
Using sendBackwards Method
Let's see a code example to see the output when the sendBackwards method is used. The sendBackwards method moves an object one-step down in the stack of drawn objects. In this case line2 is sent behind line1, on using the sendBackwards method.
<!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>Using sendBackwards method</h2>
<p>
You can see that line2 (red) has been moved down in the stack of drawn objects
</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,
});
// Initiate another Line object
var line2 = new fabric.Line([200, 70, 70, 40], {
stroke: "red",
strokeWidth: 20,
});
// Add both to the canvas
canvas.add(line1);
canvas.add(line2);
// Using sendBackwards method
line2.sendBackwards();
</script>
</body>
</html>
Using sendBackwards with Intersection Parameter
In this example, we have used three line objects namely line1, line2 and line3. Although they have been added to the canvas according to their numerical order, line3 clearly lies behind line1. This is because we have used the sendBackwards method with intersection key enabled, which sends line3 behind its next lower intersecting object which is line1.
<!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>Using sendBackwards method with three objects and intersection key enabled</h2>
<p>
You can see that the green line now lies behind the blue line which is line number 1
</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,
});
// Initiate another Line object
var line2 = new fabric.Line([500, 70, 400, 40], {
stroke: "red",
strokeWidth: 20,
});
// Initiate another Line object
var line3 = new fabric.Line([200, 30, 30, 90], {
stroke: "green",
strokeWidth: 20,
});
// Add them all to the canvas
canvas.add(line1);
canvas.add(line2);
canvas.add(line3);
// Using sendBackwards method with intersection parameter
line3.sendBackwards(true);
</script>
</body>
</html>
Key Points
-
Default behavior:
sendBackwards()moves the object one step down in the stack -
Intersection mode: When
intersecting: trueis passed, the object moves behind the next lower intersecting object - Stack order: Objects added later appear on top by default
- Method chaining: The method returns the fabric object, allowing for method chaining
Conclusion
The sendBackwards method provides precise control over object layering in FabricJS. Use it without parameters for simple one-step moves, or with the intersection parameter for more intelligent positioning relative to overlapping objects.
391 Views
