Fabric.js에서 요소를 이동할 때 캔버스 뒤에 이미지를 유지하는 방법

Fabric.js로 캔버스를 다룰 때 흔히 겪는 문제가 하나 있습니다. 기본 설정에서는 이미지 위에 놓인 도형이나 요소를 드래그해서 이동하는 순간, 해당 객체가 자동으로 맨 앞(z-index 최상위)으로 올라오면서 뒤에 있던 배경 이미지가 가려져 버리는 현상입니다.

해결 방법: preserveObjectStacking 옵션

객체를 이동하더라도 원래의 객체 스택 순서(레이어 순서)를 그대로 유지하고 싶다면, Fabric.Canvas 인스턴스를 생성할 때 preserveObjectStacking 옵션을 true로 지정하면 됩니다.

window.canvas = new fabric.Canvas('c', { preserveObjectStacking: true });

이렇게 설정하면 선택된 객체를 드래그하는 동안에도 스택 순서가 보존되기 때문에, 도형이 항상 배경 이미지 위에 표시되고 이미지가 사라지거나 덮이는 일이 발생하지 않습니다.

정리

• 기본 동작: 객체를 선택·이동하면 자동으로 맨 앞으로 올라옴
• 해결책: Canvas 생성 시 preserveObjectStacking: true 옵션 추가
• 결과: 이동 중에도 레이어 순서가 유지되어 배경 이미지가 그대로 유지됨

레이어 순서가 중요한 에디터나 디자인 툴을 Fabric.js로 개발할 때 필수적인 옵션이니 꼭 기억해 두시기 바랍니다.