HTML 캔버스 fill() 메서드 – 도형 채우기 기초와 예제

HTML 캔버스 fill() 메서드란?

HTML 캔버스(Canvas)에서 fill() 메서드는 현재 정의된 드로잉 경로(path)를 지정한 색상으로 채우는 역할을 합니다. 별도의 색상을 지정하지 않으면 기본값은 검정색(black)으로 채워집니다.

<canvas> 요소는 자바스크립트(JavaScript)를 활용해 웹 페이지 위에 그래픽을 직접 그릴 수 있게 해주는 강력한 도구입니다. 모든 캔버스는 크기를 결정하는 두 가지 속성, 즉 width(너비)와 height(높이)를 가지고 있습니다.

문법(Syntax)

ctx.fill();

fill() 메서드는 일반적으로 beginPath(), rect(), arc() 등으로 경로를 만든 후 호출하며, 채우기 색상은 fillStyle 속성으로 미리 지정합니다.

fill() 메서드 구현 예제

다음은 캔버스에 사각형을 그린 뒤 초록색으로 채우는 간단한 예제입니다.

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="450" height="250" style="border:2px solid blue;">
브라우저가 HTML5 canvas 태그를 지원하지 않습니다.</canvas>
<script>
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.beginPath();          // 새로운 경로 시작
   ctx.rect(50, 60, 300, 200); // 사각형 경로 생성
   ctx.fillStyle = "green";    // 채우기 색상 지정
   ctx.fill();                 // 경로 내부를 색으로 채움
</script>
</body>
</html>

실행 결과(Output)

HTML 캔버스 fill() 메서드 – 도형 채우기 기초와 예제

추가 팁: fillStyle 활용하기

fillStyle 속성에는 다양한 형식의 색상 값을 사용할 수 있습니다.

색상 이름: ctx.fillStyle = "green";
HEX 코드: ctx.fillStyle = "#00ff00";
RGB 값: ctx.fillStyle = "rgb(0, 255, 0)";
RGBA(투명도 포함): ctx.fillStyle = "rgba(0, 255, 0, 0.5)";

이처럼 fill() 메서드와 fillStyle 속성을 조합하면 원하는 색상과 투명도로 도형을 자유롭게 표현할 수 있습니다.