Canvas 텍스트 · 폼 그리기 완전 정리

 

 

HTML Canvas

Canvas 텍스트 · 폼 그리기 완전 정리

fillText, strokeText, drawImage, 폼 입력값으로 사각형 그리기를 실전 흐름대로 정리합니다.

0 오늘 분석할 코드

<canvas id="myCanvas" width="500" height="200"></canvas>
<input id="x" type="number" value="10">
<input id="y" type="number" value="10">
<input id="width" type="number" value="100">
<input id="height" type="number" value="100">
<input id="lineWidth" type="number" value="1">
<input id="strokeStyle" type="color" value="#000000">
<button type="button" onclick="draw()">그리기</button>
<script>
let canvas = null;
let context = null;

window.onload = init;

function init() {
  canvas = document.getElementById("myCanvas");
  context = canvas.getContext("2d");
}

function draw() {
  let x = document.getElementById("x").value;
  let y = document.getElementById("y").value;
  let width = document.getElementById("width").value;
  let height = document.getElementById("height").value;
  context.beginPath();
  context.rect(x, y, width, height);
  context.stroke();
}
</script>

fillText()캔버스에 채워진 텍스트를 그립니다.

strokeText()캔버스에 외곽선 텍스트를 그립니다.

font텍스트의 크기와 글꼴을 지정하는 context 속성입니다.

Image()자바스크립트에서 이미지 객체를 만드는 생성자입니다.

onload이미지나 페이지가 로드된 뒤 실행되는 이벤트 처리 지점입니다.

onerror이미지 로딩 실패 같은 오류 상황을 처리합니다.

rect()사각형 경로를 추가합니다.

clearRect()지정한 캔버스 영역을 지웁니다.

---

1 텍스트와 폼 예제의 큰 흐름

이 묶음은 캔버스에 텍스트를 그리고, 이미지를 불러오고, 폼 입력값을 읽어 사각형을 그리는 예제입니다. 핵심은 DOM 입력값과 Canvas API를 연결하는 것입니다.

• strokeText는 글자 외곽선을 그립니다.
• fillText는 글자 내부를 채워 그립니다.
• Image 객체는 onload 이후 drawImage로 그립니다.
• 폼 input 값은 getElementById().value로 읽습니다.

---

2 strokeText와 fillText

메서드	역할	스타일 속성
strokeText(text, x, y)	글자 외곽선을 그림	strokeStyle, lineWidth
fillText(text, x, y)	글자 내부를 채움	fillStyle
font	글자 크기와 글꼴 지정	"50px arial"
textAlign	가로 정렬 기준	left, center, right
textBaseline	세로 기준선	top, middle, alphabetic

---

3 텍스트 좌표 이해

fillText와 strokeText의 x, y는 글자 박스의 왼쪽 위가 아니라 기준선 위치입니다. 기본 textBaseline이 alphabetic이기 때문에 y좌표가 글자의 아래쪽 기준처럼 보일 수 있습니다.

1. font를 먼저 지정합니다.
2. fillStyle 또는 strokeStyle을 지정합니다.
3. 원하는 좌표에 fillText나 strokeText를 호출합니다.
4. 위치가 어긋나면 textAlign과 textBaseline을 조정합니다.

---

 

반응형

 

4 이미지와 이름 출력

이미지는 네트워크나 파일 로딩 시간이 있기 때문에 img.src를 지정한 직후 바로 drawImage를 호출하면 실패할 수 있습니다. 그래서 onload 함수 안에서 drawImage와 텍스트 출력 코드를 실행합니다.

let img = new Image();
img.onload = function () {
  ctx.drawImage(img, 20, 20, 100, 100);
  ctx.fillText("Spongebob", 20, 100);
};
img.src = "media/spongebob.png";

---

5 onerror 대체 출력

이미지가 없거나 경로가 틀리면 onerror가 실행됩니다. 원본 예제처럼 사각형과 Image X 문구를 그리면 실패 상황도 화면에서 확인할 수 있습니다.

• 이미지 경로가 틀린 경우 onerror가 실행됩니다.
• 대체 텍스트는 사용자에게 실패 원인을 알려줍니다.
• strokeRect로 빈 이미지 영역을 표시할 수 있습니다.
• 디버깅 중에는 console.log를 함께 넣어도 좋습니다.

---

6 폼으로 사각형 그리기 구조

폼 예제는 input에 들어 있는 x, y, width, height, lineWidth, strokeStyle 값을 읽어서 rect와 stroke에 적용합니다. 버튼은 type="button"이어야 폼 제출로 페이지가 새로고침되지 않습니다.

입력 id	사용 위치	의미
x	rect(x, y, width, height)	사각형 시작 x좌표
y	rect(x, y, width, height)	사각형 시작 y좌표
width	rect의 세 번째 인수	사각형 너비
height	rect의 네 번째 인수	사각형 높이
lineWidth	context.lineWidth	선 굵기
strokeStyle	context.strokeStyle	선 색

---

7 window.onload와 init

window.onload = init은 HTML 요소가 모두 준비된 뒤 canvas와 context를 찾도록 만듭니다. 스크립트가 head에 있을 때는 body의 canvas가 아직 만들어지기 전일 수 있기 때문입니다.

1. 전역 변수 canvas와 context를 선언합니다.
2. load 이벤트에서 init 함수를 실행합니다.
3. init 안에서 getElementById와 getContext를 호출합니다.
4. draw와 erase는 준비된 전역 변수를 사용합니다.

---

8 value 값과 숫자 변환

input.value는 문자열입니다. rect는 숫자처럼 처리해 주는 경우가 많지만, 계산을 섞을 때는 Number 또는 parseInt로 명시 변환하는 편이 안전합니다.

let x = Number(document.getElementById("x").value);
let y = Number(document.getElementById("y").value);
let width = Number(document.getElementById("width").value);
let height = Number(document.getElementById("height").value);

특히 입력값을 더하거나 비교할 때 문자열 결합 문제가 생기지 않게 숫자 변환을 습관화합니다.

---

9 erase 함수 이해

clearRect(0, 0, canvas.width, canvas.height)는 캔버스 전체 픽셀을 지웁니다. 배경색을 CSS로 지정한 캔버스라면 지운 뒤에도 배경색은 그대로 보입니다.

• 첫 번째와 두 번째 인수는 지울 영역의 시작 좌표입니다.
• 세 번째와 네 번째 인수는 지울 영역의 너비와 높이입니다.
• 전체 삭제는 canvas.width와 canvas.height를 사용합니다.
• 일부만 지우려면 좌표와 크기를 작게 지정합니다.

---

10 코드에서 발견할 수 있는 개선점

부분	개선	이유
context.drawImage	ctx.drawImage로 통일	함수 인수 ctx를 제대로 활용합니다.
img.alt	Canvas 출력과 별개로 처리	Image 객체 alt는 캔버스 대체 출력이 아닙니다.
input.value	Number로 변환	계산 시 문자열 문제를 줄입니다.
body 닫힘 위치	body 안에 화면 요소 배치	HTML 구조가 유효해집니다.
버튼	type="button" 유지	폼 제출을 막습니다.

---

11 실전 확장 아이디어

확장	구현 방향
채우기 색	fillStyle 입력을 추가하고 fillRect를 호출합니다.
도형 선택	select로 rect, arc, line 중 하나를 고릅니다.
텍스트 입력	input text 값을 fillText에 전달합니다.
이미지 경로 입력	src 입력값을 Image 객체에 넣습니다.
미리보기 초기화	draw 전에 clearRect를 먼저 실행합니다.

---

12 검증 체크리스트

• canvas id와 getElementById 인수가 일치합니다.
• 스크립트가 head에 있으면 load 이후 DOM을 찾습니다.
• 이미지는 onload 안에서 그립니다.
• 이미지 실패 처리는 onerror로 따로 준비합니다.
• 폼 버튼은 type="button"으로 둡니다.
• 입력값을 계산에 쓰기 전 숫자로 변환합니다.

---

M 자주 하는 실수

실수	문제	해결
이미지 src 지정 직후 drawImage 호출	이미지가 아직 로드되지 않아 그려지지 않을 수 있습니다.	drawImage는 img.onload 안에서 실행합니다.
input.value를 숫자처럼 계산	문자열 결합이나 비교 오류가 생길 수 있습니다.	Number(value)로 변환합니다.
버튼 type 생략	폼 제출로 페이지가 새로고침될 수 있습니다.	type="button"을 명시합니다.
ctx와 context를 섞어 씀	함수 재사용성이 떨어지고 전역 변수에 의존합니다.	함수 안에서는 전달받은 ctx를 일관되게 씁니다.
body 밖에 화면 요소 배치	HTML 구조가 깨질 수 있습니다.	폼과 캔버스는 body 내부에 둡니다.

핵심 한 줄 요약

textfillText와 strokeText는 font, fillStyle, strokeStyle 설정 후 호출합니다.

imageImage 객체는 onload에서 drawImage를 실행해야 안정적으로 출력됩니다.

form폼 입력값을 읽어 Canvas API 인수로 넘기면 사용자가 도형을 조절할 수 있습니다.

Tags

#Canvas#JavaScript#fillText#strokeText#drawImage#Image#onload#form#rect#clearRect#티스토리

▼ 티스토리 태그 입력란 복사용

Canvas, JavaScript, fillText, strokeText, drawImage, Image, onload, form, rect, clearRect, 티스토리