Fabric.js는 HTML5 캔버스를 쉽게 조작할 수 있는 자바스크립트 라이브러리입니다. 이번 포스트에서는 Fabric.js를 사용하여 캔버스의 배경을 설정하는 방법에 대해 알아보겠습니다.
1. fabric.Canvas 생성
먼저, Fabric.js를 사용하기 위해 fabric.Canvas 객체를 생성해야 합니다. 다음과 같이 HTML에서 캔버스 엘리먼트를 생성하고, 자바스크립트에서 fabric.Canvas 객체를 생성합니다.
<canvas id="canvas"></canvas>
const canvas = new fabric.Canvas('canvas');
2. 배경 이미지 추가
다음으로, 배경 이미지를 추가해보겠습니다. 이미지 파일을 준비하고, Fabric.js에서 제공하는 fabric.Image.fromURL 메서드를 사용하여 이미지를 로드합니다.
const backgroundImageUrl = '배경 이미지 URL';
fabric.Image.fromURL(backgroundImageUrl, function(img) {
// 이미지를 캔버스에 추가합니다.
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
});
setBackgroundImage 메서드를 사용하여 이미지를 캔버스의 배경으로 설정할 수 있습니다. canvas.renderAll 메서드는 배경 이미지를 적용한 후, 캔버스를 다시 렌더링하는 역할을 합니다.
3. 배경 색상 설정
만약 이미지 대신 단색 배경을 설정하고 싶다면 canvas.setBackgroundColor 메서드를 사용할 수 있습니다. 다음과 같이 메서드를 호출하여 배경 색상을 설정합니다.
const backgroundColor = '배경 색상';
canvas.setBackgroundColor(backgroundColor, canvas.renderAll.bind(canvas));
canvas.renderAll 메서드를 호출하여 변경된 배경 색상을 적용합니다.
4. 배경 반복 설정
Fabric.js에서 배경 이미지를 반복해서 보여주고 싶다면 canvas.backgroundImage의 repeat 속성을 설정할 수 있습니다. 다음과 같이 속성을 설정합니다.
canvas.backgroundImage.repeat = 'repeat';
repeat 속성은 repeat, repeat-x, repeat-y, no-repeat 등 다양한 값으로 설정할 수 있습니다.
이제 Fabric.js를 사용하여 캔버스의 배경을 설정하는 방법에 대해 알아보았습니다. 이를 활용하여 다양한 디자인 요소를 추가하고 캔버스를 풍성하게 꾸밀 수 있습니다.