Introduction

Elements are fundamental components in Fabric.js. A canvas without elements serves little purpose. As the number of elements increases, overlaps become inevitable. Certain visual effects may also require multiple elements to be stacked. In such cases, controlling the stacking order (z-index) of elements becomes essential.

This article explains five methods for managing elemant layering in Fabric.js.

Setup

We'll create three elements on the canvas. All subsequent demonstrations are based on the following code:

<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>
<script>
  const canvas = new fabric.Canvas('canvas')

  // Orange rectangle
  const rectangle = new fabric.Rect({
    top: 30,
    left: 30,
    fill: 'orange',
    width: 200,
    height: 100
  })

  // Pink circle
  const circle = new fabric.Circle({
    top: 50,
    left: 60,
    fill: 'hotpink',
    radius: 50
  })

  // Blue triangle
  const triangle = new fabric.Triangle({
    top: 80,
    left: 30,
    width: 80,
    height: 100,
    fill: 'blue'
  })

  canvas.add(rectangle, circle, triangle)
</script>

The canvas displays a rectangle, circle, and triangle. They are added to the canvas in the order specified by canvas.add(rectangle, circle, triangle), establishing a clear stacking order.

Bring to Front

If the orange rectangle is at the bottom and needs to be moved to the top, use the bringToFront() method.

<button onclick="bringToFront()">Bring to Front</button>
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<!-- Fabric.js import omitted -->
<script>
  // Setup code omitted
  function bringToFront() {
    canvas.bringToFront(rectangle)
    // Alternatively:
    // rectangle.bringToFront()
  }
</script>

When using the canvas to perform the operation, pass the target object as an argument. In this example, we pass the rectangle object.

You can also call rectangle.bringToFront() too have the element manipulate itself.

Send to Back

Use the sendToBack method to move an element to the bottom layer.

Similar to bringToFront, the sendToBack method can be invoked either through the canvas or direct on the element.

<button onclick="sendToBack()">Send Triangle to Back</button>
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<!-- Fabric.js import omitted -->
<script>
  // Setup code omitted
  function sendToBack() {
    canvas.sendToBack(triangle)
    // Alternatively:
    // triangle.sendToBack()
  }
</script>

Move Up One Layer

To move an element up by one layer, use the bringForward method.

For example, to move the rectangle up one layer each time a button is clicked:

<button onclick="bringForward()">Move Rectangle Up One Layer</button>
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<!-- Fabric.js import omitted -->
<script>
  // Setup code omitted
  function bringForward() {
    canvas.bringForward(rectangle)
    // Alternatively:
    // rectangle.bringForward()
  }
</script>

Move Down One Layer

Similarly, to move an element down one layer, use the sendBackwards method.

<button onclick="sendBackwards()">Move Triangle Down One Layer</button>
<canvas id="canvas" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<!-- Fabric.js import omitted -->
<script>
  // Setup code omitted
  function sendBackwards() {
    canvas.sendBackwards(triangle)
    // Alternatively:
    // triangle.sendBackwards()
  }
</script>

Set Custom Layer Index

If you need to directly set the layer index, use the moveTo method.

When using moveTo through the canvas, provide two arguments: the target object and the desired endex.

You can also call moveTo directly on an element, requiring only the index arguement.

canvas.moveTo(triangle, 10)

// Or
triangle.moveTo(10)

Here, triangle refers to the triangle created in the setup phase.