Fabric.js는 JavaScript로 작성된 오픈 소스 라이브러리로, HTML5 Canvas 요소를 조작하는 것을 도와줍니다. 이번 포스트에서는 Fabric.js를 사용하여 웹 페이지에 사각형을 그리는 방법을 알아보겠습니다.

1. Fabric.js 설치

먼저, Fabric.js를 설치해야 합니다. 다음 명령을 사용하여 npm을 통해 설치할 수 있습니다.

npm install fabric

2. Canvas 생성 및 사각형 그리기

Fabric.js를 사용하여 웹 페이지에 사각형을 그리려면 다음과 같은 단계를 따라야 합니다.

Step 1: HTML 파일에 Canvas 요소를 추가합니다.

<canvas id="canvas"></canvas>

Step 2: JavaScript 파일에서 Fabric.js를 사용할 수 있도록 설정합니다.

const canvas = new fabric.Canvas('canvas');

Step 3: 사각형을 생성하고 속성을 설정합니다. Fabric.js에서 사각형은 fabric.Rect 클래스를 사용합니다.

const rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 200,
  height: 100
});

Step 4: 사각형을 Canvas에 추가합니다.

canvas.add(rect);

Step 5: Canvas를 렌더링합니다.

canvas.renderAll();

3. 실행 결과 확인하기

위의 단계를 완료하고 웹 페이지를 열어보면, Canvas 요소 위에 빨간색으로 채워진 사각형이 그려진 것을 확인할 수 있습니다.

마치며

Fabric.js를 사용하여 Canvas에 사각형을 그리는 방법을 알아보았습니다. 이를 응용하여 다양한 도형을 그리거나, 그리기 도구를 추가할 수 있습니다. Fabric.js는 강력한 기능과 사용하기 쉬운 API를 제공하므로, 다양한 웹 기반 프로젝트에 유용하게 사용할 수 있습니다.

더 자세한 정보는 공식 홈페이지를 참조하시기 바랍니다.