[javascript] Fabric.js로 텍스트 추가하기

30 Nov 2023

javascript

Fabric.js는 HTML5 캔버스를 간편하게 조작할 수 있는 JavaScript 라이브러리입니다. 이번 포스트에서는 Fabric.js를 사용하여 캔버스에 텍스트를 추가하는 방법에 대해 알아보겠습니다.

1. Fabric.js 설치하기

Fabric.js를 사용하기 위해 먼저 필요한 패키지를 설치해야 합니다. 프로젝트 폴더에서 다음 명령을 실행하여 Fabric.js를 설치하세요.

npm install fabric

2. HTML 파일에 Fabric.js 추가하기

Fabric.js를 사용할 HTML 파일에 다음 코드를 추가합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Fabric.js로 텍스트 추가하기</title>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

3. JavaScript 코드 작성하기

텍스트를 추가하기 위해 main.js 파일을 생성하고 다음 코드를 추가합니다.

// 캔버스 객체 생성
var canvas = new fabric.Canvas('myCanvas');

// 텍스트 추가
var text = new fabric.Text('Hello, Fabric.js!', {
  left: 100,
  top: 100,
  fill: 'black',
  fontSize: 48
});

// 캔버스에 텍스트 추가
canvas.add(text);

위 코드에서는 fabric.Text 클래스를 사용하여 Hello, Fabric.js! 텍스트 객체를 생성한 후, fabric.Canvas 객체에 추가합니다. left와 top 속성으로 텍스트의 위치를 지정하며, fill로 텍스트의 색상을 설정할 수 있습니다. fontSize를 사용하여 텍스트의 크기를 조정할 수도 있습니다.

4. 실행결과 확인하기

웹 브라우저에서 HTML 파일을 열면, 캔버스에 “Hello, Fabric.js!”라는 텍스트가 렌더링된 것을 확인할 수 있습니다.

결론

Fabric.js를 사용하여 HTML5 캔버스에 텍스트를 추가하는 방법을 알아보았습니다. Fabric.js는 간편하게 캔버스를 조작할 수 있는 많은 기능을 제공하므로, 다양한 그래픽 요소를 쉽게 추가할 수 있습니다.

더 자세한 내용은 공식 사이트 Fabric.js를 참고하세요.