[Fabric.js] 1. React + TypeScript 환경에서 Fabric.js로 캔버스 생성하기

💗 해당 프로젝트 해보기: red-flavor-diary.shop

프로젝트에서 그림을 그리고 스티커로 꾸밀 수 있는 그림판을 만들기로 하였습니다. HTML Canvas로 직접 구현하였으나 잘 작동하지 않는 지우개 기능, 스티커로 크기를 조절하고 방향을 변경하는 등의 다양한 인터렉션이 제한된다는 점 때문에 라이브러리를 사용하기로 하였습니다.

1. Fabric.js를 사용한 이유

Fabric.js는 강력하고 심플한 자바스크립트 HTML5 캔버스 라이브러리입니다.
일반 HTML Canvas와 비교하면 코드가 비교적 간단하고 다양한 기능들을 쉽게 구현할 수 있습니다.

예를 들어, 그림을 그릴 수 있는 브러쉬 기능을 만들 때 HTML Canvas와 Fabric.js의 코드 양의 차이를 확인할 수 있습니다.
먼저 HTML Canvas는 마우스의 좌표 값을 받아온 후 그림을 그리는 함수, 그림 그리기를 시작하는 함수, 그림 그리기를 멈추는 함수 등을 모두 직접 작성해야 합니다. 그리고 모바일 환경에서는 작동하지 않기 때문에 'touch' 이벤트에 대한 함수들을 따로 또 작성해야 합니다.
반면에 Fabric.js는 간단하게 기본 설정을 하고 나면 바로 캔버스가 생성되고 그림을 그릴 수 있습니다. 또한 모바일 환경에서도 잘 작동합니다.

이러한 이점 외에도 캔버스 위의 오브젝트를 움직이고, 크기를 조절하고, 모양을 변형하는 등의 다양한 인터렉션들을 제공합니다. 스티커 기능도 구현해야 하는 이번 프로젝트에 잘 맞을 것 같아 사용하게 되었습니다.

🔗 Fabri.js: http://fabricjs.com/

여담으로 ...
아무래도 자바스크립트 기반 라이브러리이다 보니 공식 문서나 데모 모두 자바스크립트로 코드가 적혀있었습니다. 그리고 많은 분들 또한 자바스크립트 환경에서 사용했기 때문에 React, TypeScript를 사용하면서 정말 많은 시행착오를 겪어야 했습니다. 저와 비슷한 상황에 처하신 분들 그리고 이 경험을 잘 정리하고픈 나 자신을 위해 여러 포스트에 걸쳐 작성할 예정입니다.

2. Fabric.js 설치하기

Fabric.js를 사용하려면 먼저 설치를 해야 합니다.

> npm i fabric

TypeScript를 사용하시는 분들은 아래의 패키지도 다운 받으셔야 합니다. 아래의 패키지는 fabric의 타입 정의를 담고 있습니다.

> npm install --save @types/fabric

⚠️ 그리고 혹시 fabricjs-react 패키지를 다운 받으신 분들은 삭제하는 것을 권합니다. 저도 해당 패키지를 다운 받았다가 다른 패키지들과 충돌하는 문제가 발생해 캔버스가 제대로 작동하지 않았습니다.

3. 캔버스 초기화 하기

패키지를 모두 다운 받았다면 먼저 캔버스를 초기화해야 합니다.

const [canvas, setCanvas] = useState<fabric.Canvas | null>();

useEffect(() => {
  const newCanvas = new fabric.Canvas('canvas', {
      width: 500,
      height: 500,
    });
    setCanvas(newCanvas);
  }, []);
}

return (
  <>
  	<canvas id='canvas' />
  </>
);  

• new fabric.Canvas()로 새로운 캔버스를 생성할 수 있습니다.
  • new fabric.Canvas(id, { ... }): 엘리멘트의 id를 작성합니다.
• 처음 생성할 때 width와 height, backgroundImage 등 초기 설정을 할 수 있습니다.
• useEffect로 처음 화면에 렌더링될 때만 캔버스를 초기화할 수 있도록 합니다.
• 캔버스를 state 값에 넣은 이유는 나중에 브러쉬나 스티커를 동적으로 바꾸기 위해서입니다.

이렇게 하면 캔버스가 생성됩니다!

다음 포스트에서는

동적으로 다양한 캔버스의 속성값을 설정하는 방법을 알아보겠습니다. 감사합니다.