Fabric.js는 JavaScript를 기반으로 하는 오픈 소스 캔버스 라이브러리로, 도형을 만들고 편집할 수 있는 기능을 제공합니다. 이번 포스트에서는 Fabric.js를 사용하여 캔버스에서 도형을 삭제하는 방법에 대해 알아보겠습니다.

1. 도형 생성하기

먼저, Fabric.js를 사용하여 캔버스에 도형을 생성해야 합니다. 아래의 예시 코드는 Fabric.js를 사용하여 사각형을 캔버스에 추가하는 방법을 보여줍니다.

// Create a canvas element
var canvas = new fabric.Canvas('canvas');

// Create a rectangle
var rectangle = new fabric.Rect({
  top: 100,
  left: 100,
  width: 200,
  height: 100,
  fill: 'blue'
});

// Add the rectangle to the canvas
canvas.add(rectangle);

위의 코드를 실행하면 캔버스에 파란색 사각형이 생성됩니다.

2. 도형 삭제하기

이제 생성된 도형을 삭제하는 방법을 알아보겠습니다. Fabric.js는 remove() 메소드를 사용하여 도형을 삭제할 수 있습니다. 아래의 예시 코드는 생성된 사각형을 삭제하는 방법을 보여줍니다.

// Remove the rectangle from the canvas
canvas.remove(rectangle);

위의 코드를 실행하면 생성된 사각형이 캔버스에서 삭제됩니다.

마무리

이번 포스트에서는 Fabric.js를 사용하여 캔버스에서 도형을 삭제하는 방법에 대해 알아보았습니다. Fabric.js는 다양한 도형 관련 기능을 제공하므로, 필요에 따라 추가적인 편집이 가능합니다. Fabric.js 공식 문서에서 더 많은 기능과 사용법을 확인할 수 있습니다.

• Fabric.js 공식 문서: https://fabricjs.com/

Fabric.js를 사용하여 도형을 생성하고 편집하는 기능을 익히면 다양한 웹 프로젝트에서 캔버스 기능을 구현할 수 있습니다.