우선, Fabric.js를 프로젝트에 추가하고 캔버스를 생성해야 합니다. 아래의 코드는 Fabric.js를 사용하여 캔버스를 생성하는 예시입니다.

<canvas id="canvas"></canvas>
<script src="fabric.js"></script>

이제 바탕화면 이미지를 추가할 수 있습니다. 이미지를 추가하기 위해 fabric.Image 객체를 사용합니다. 이미지 객체를 생성할 때 이미지 파일의 URL을 지정해야 합니다. 아래의 코드는 이미지를 캔버스에 추가하는 예시입니다.

fabric.Image.fromURL('image.jpg', function(img) {
  canvas.add(img);
});

이미지가 추가되었다면, 해당 이미지를 활성화 또는 비활성화할 수 있습니다. Fabric.js에서는 setActiveObject 함수를 사용하여 현재 선택된 객체를 설정할 수 있습니다. 아래의 코드는 이미지를 마우스 클릭 시 활성화되도록 설정하는 예시입니다.

canvas.on("mouse:down", function(event) {
  var activeObject = event.target;
  if (activeObject && activeObject.type === 'image') {
    canvas.setActiveObject(activeObject);
  }
});

이제 해당 이미지가 클릭되면 활성화되고, 다른 객체나 이미지를 클릭하면 비활성화됩니다.

Fabric.js를 사용하면 바탕화면 이미지를 쉽게 활성화 및 비활성화할 수 있습니다. 추가적으로 Fabric.js에는 다양한 기능과 메소드가 있으므로 관련 문서 및 예제 코드를 참고하여 자세히 알아보시기 바랍니다.

참고 문서:

• Fabric.js 공식 문서
• Fabric.js GitHub 저장소