Article Categories

Selected Reading

Layers of canvas fabric.js

Javascript Web Development Front End Scripts

Fabric.js provides several methods to control the layering (z-index) of objects on the canvas. Understanding these methods is crucial for managing object visibility and creating complex compositions.

Basic Layer Control Methods

Fabric.js offers four primary methods to manipulate object layers:

canvas.sendBackwards(myObject)   // Move one layer back
canvas.sendToBack(myObject)      // Send to bottom layer
canvas.bringForward(myObject)    // Move one layer forward
canvas.bringToFront(myObject)    // Bring to top layer

Example: Layer Manipulation

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="300" style="border:1px solid #ccc;"></canvas>
    
    <script>
        const canvas = new fabric.Canvas('myCanvas');
        
        // Create overlapping objects
        const circle = new fabric.Circle({
            radius: 50,
            fill: 'red',
            left: 50,
            top: 50
        });
        
        const rect = new fabric.Rect({
            width: 100,
            height: 100,
            fill: 'blue',
            left: 80,
            top: 80
        });
        
        // Add objects to canvas
        canvas.add(circle);
        canvas.add(rect);
        
        // Demonstrate layer control
        setTimeout(() => {
            canvas.sendToBack(rect);  // Send blue rectangle behind red circle
            console.log('Rectangle sent to back');
        }, 2000);
        
        setTimeout(() => {
            canvas.bringToFront(rect);  // Bring rectangle to front again
            console.log('Rectangle brought to front');
        }, 4000);
    </script>
</body>
</html>

Custom Object Ordering

For advanced layer control, you can create a custom ordering function:

fabric.Canvas.prototype.orderObjects = function(compare) {
    this._objects.sort(compare);
    this.renderAll();
}

// Usage example
canvas.orderObjects(function(a, b) {
    return a.get('top') - b.get('top');  // Sort by vertical position
});

Layer Methods Comparison

Method	Action	Use Case
`bringToFront()`	Move to topmost layer	Make object visible above all others
`bringForward()`	Move up one layer	Fine-tune layer positioning
`sendToBack()`	Move to bottommost layer	Send object behind all others
`sendBackwards()`	Move down one layer	Gradually adjust layer position

Getting Object Layer Information

<script>
// Get the current index of an object
const objectIndex = canvas.getObjects().indexOf(myObject);
console.log('Object is at layer:', objectIndex);

// Check if object is at front or back
const objects = canvas.getObjects();
const isAtFront = objects[objects.length - 1] === myObject;
const isAtBack = objects[0] === myObject;

console.log('Is at front:', isAtFront);
console.log('Is at back:', isAtBack);
</script>

Conclusion

Fabric.js layer methods provide precise control over object stacking order. Use the basic methods for simple layer adjustments, or implement custom ordering functions for complex layering requirements.

karthikeya Boyini

Updated on: 2026-03-15T23:18:59+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next