Fabric.jsでキャンバス上のオブジェクトの重なり順（レイヤー）を自在に操作する方法

Fabric.jsを使ってHTML5キャンバス上に複数のオブジェクトを描画すると、後から追加したオブジェクトほど前面に表示されます。しかし、実際のアプリケーション開発では「特定の図形だけを最前面に出したい」「背景画像を常に最背面に固定したい」といった、オブジェクトの重なり順（z-index）を動的に制御したい場面が多くあります。

この記事では、Fabric.jsが標準で提供しているレイヤー（重なり順）変更用のAPIメソッドと、独自の並び替えロジックを実装するカスタム手法について解説します。

標準APIで重なり順を変更する

Fabric.jsには、オブジェクトのz-indexを変更するための4つのメソッドが用意されています。使い方は非常にシンプルで、対象のオブジェクトを引数として渡すだけです。

canvas.sendBackwards(myObject); // 1つ背面へ移動
canvas.sendToBack(myObject);     // 最背面へ移動
canvas.bringForward(myObject);   // 1つ前面へ移動
canvas.bringToFront(myObject);   // 最前面へ移動

各メソッドの役割

• sendBackwards()：指定したオブジェクトを現在の位置から1つだけ背面に移動します。
• sendToBack()：指定したオブジェクトをすべてのオブジェクトの最背面に移動します。
• bringForward()：指定したオブジェクトを現在の位置から1つだけ前面に移動します。
• bringToFront()：指定したオブジェクトをすべてのオブジェクトの最前面に移動します。

これらのメソッドは内部でオブジェクト配列の順序を入れ替え、自動的に再描画を行うため、開発者は描画処理を意識する必要がありません。

独自の比較関数でオブジェクトを並び替える

標準メソッドでは「1つずつ移動」「最前面・最背面へ移動」しかできません。たとえば、オブジェクトのプロパティ（座標やカスタム属性など）に基づいて一括でソートしたい場合は、fabric.Canvas.prototypeを拡張して独自の並び替えメソッドを定義すると便利です。

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

このコードでは、Canvasの内部オブジェクト配列 _objects をJavaScript標準の Array.prototype.sort() で並べ替え、その後に renderAll() を呼び出して画面を再描画しています。compare 引数には、通常のsortと同様に比較関数を渡せます。

使用例：Y座標でソートして奥行きを表現する

// Y座標が小さいオブジェクトほど背面に配置される
canvas.orderObjects(function(a, b) {
    return a.top - b.top;
});

このように比較関数を自由に定義できるため、「選択状態のオブジェクトを優先的に前面へ」「カスタムプロパティの値順に並べる」といった柔軟なレイヤー制御が実現できます。

まとめ

Fabric.jsのレイヤー操作は、標準の4つのメソッド（sendBackwards / sendToBack / bringForward / bringToFront）で基本的なニーズには十分対応できます。さらに細かい制御が必要な場合は、prototypeを拡張したカスタムソートメソッドを追加することで、アプリケーションの要件に合わせた柔軟な重なり順管理が可能になります。図形エディタやドローツールなどを開発する際は、ぜひ活用してみてください。