[javascript] Fabric.js로 캔버스의 배경 색상 설정하기

30 Nov 2023

javascript

Fabric.js는 HTML5 캔버스 요소를 조작하는 데 사용되는 강력한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 캔버스 요소의 배경 색상을 설정하는 방법을 살펴보겠습니다.

캔버스 요소 생성하기

먼저, Fabric.js를 사용하기 위해 해당 라이브러리를 포함시켜야 합니다. HTML 문서의 <head> 부분에 아래 스크립트 태그를 추가하세요.

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.7.0/fabric.min.js"></script>

다음으로, 캔버스 요소를 생성하고 초기 색상을 설정해야 합니다. HTML 문서의 <body> 부분에 <canvas> 요소를 추가하세요.

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

배경 색상 설정하기

JavaScript에서 Fabric.js를 사용하여 배경 색상을 설정하는 방법은 다음과 같습니다.

// 캔버스 요소 가져오기
var canvas = new fabric.Canvas('myCanvas');

// 배경 색상 설정하기
canvas.backgroundColor = '#FF0000'; // 빨간색 배경으로 설정

canvas.renderAll(); // 변경된 배경 색상을 캔버스에 적용

위의 예제에서 backgroundColor 속성을 사용하여 원하는 색상을 설정할 수 있습니다. 여기에서는 빨간색 #FF0000으로 설정되었습니다.

마지막으로, renderAll() 메서드를 호출하여 변경된 배경 색상을 캔버스에 적용해야 합니다.

결과 확인하기

위의 코드를 실행하면 캔버스의 배경 색상이 빨간색으로 변경됩니다. 필요에 따라 코드를 수정하여 다양한 색상으로 배경을 설정할 수 있습니다.

참고자료: