HTML5 캔버스(canvas)에 채워진 텍스트(filled text)를 그리려면 fillText() 메서드를 사용합니다. 이 메서드는 지정된 좌표(x, y) 위치에 주어진 텍스트를 채워서 렌더링하며, 별도로 색상을 지정하지 않으면 기본 색상은 검정색입니다.
fillText() 메서드 문법
fillText(text, x, y [, maxWidth ])
fillText() 메서드의 각 매개변수는 다음과 같습니다.
| 번호 | 매개변수 | 설명 |
| 1 | text | 캔버스에 그릴 텍스트 내용 |
| 2 | x | 텍스트가 시작될 x 좌표 |
| 3 | y | 텍스트가 시작될 y 좌표 |
| 4 | maxWidth | 허용되는 최대 너비(픽셀 단위, 선택 사항) |
fillText() 활용 예제
아래 코드를 실행하면 HTML5 캔버스에 fillText() 메서드를 사용해 텍스트를 그릴 수 있습니다. 예제에서는 두 가지 서로 다른 글꼴과 색상을 적용해 보았습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas fillText()</title>
</head>
<body>
<canvas id="newCanvas" width="400" height="150" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("newCanvas");
var ctxt = c.getContext("2d");
ctxt.fillStyle = '#00F';
ctxt.font = "20px Georgia";
ctxt.fillText("Tutorialspoint", 10, 50);
ctxt.fillStyle = '#Cff765';
ctxt.font = "30px Verdana";
ctxt.fillText("Simply Easy Learning!", 10, 90);
</script>
</body>
</html>코드 설명
getContext("2d"): 캔버스의 2D 드로잉 컨텍스트를 가져와 그래픽 작업을 시작합니다.fillStyle: 텍스트에 적용할 채우기 색상을 지정합니다. 위 예제에서는 파란색(#00F)과 연두색(#Cff765)을 사용했습니다.font: 텍스트의 크기와 글꼴을 설정합니다. 예제에서는 "20px Georgia"와 "30px Verdana"를 각각 적용했습니다.fillText(): 설정된 스타일대로 지정한 좌표에 텍스트를 그립니다.
이처럼 fillText() 메서드는 fillStyle과 font 속성과 함께 사용하면 캔버스 위에 원하는 스타일의 텍스트를 자유롭게 그릴 수 있습니다.