Canvas 이미지·텍스트 완전 정리

 

 

Web Development · Canvas

Canvas 이미지 · 텍스트

drawImage, fillRect, 채운 원호, strokeText/fillText를 정리합니다.

시작 오늘 분석할 코드

이 장은 Canvas에 이미지와 텍스트를 그리는 방법, 그리고 마우스 드래그 이벤트로 선을 이어 그리는 방법을 다룹니다.

const img = new Image(); img.onload = function() { context.drawImage(img, 20, 20, 100, 200); }; img.src = 'media/lion.jpg'; context.fillRect(20, 20, 100, 100); context.strokeText('Javascript 재밌다.', 50, 250);

ImageCanvas에 그릴 이미지 객체입니다.

onload이미지 로딩 완료 후 실행됩니다.

drawImage이미지를 Canvas에 그립니다.

fillRect채운 사각형을 바로 그립니다.

strokeText텍스트 외곽선을 그립니다.

fillText텍스트 내부를 채워 그립니다.

---

1 이미지 객체와 onload

Canvas에 이미지를 그릴 때는 new Image()로 이미지 객체를 만들고, 이미지 로딩이 끝난 뒤 drawImage를 호출해야 합니다.

new Image

→

onload

→

drawImage

단계	코드	역할
객체 생성	new Image()	이미지 로딩 준비
핸들러 등록	img.onload	로드 완료 후 실행
경로 지정	img.src	파일 로딩 시작
그리기	drawImage	Canvas에 이미지 출력

---

2 drawImage 위치와 크기

drawImage(img, 20, 20, 100, 200)은 이미지를 (20,20)에 100x200 크기로 그립니다. 캔버스에 꽉 채우려면 canvas.width와 canvas.height를 사용합니다.

형식	의미	예시
drawImage(img,x,y)	원본 크기	지정 위치 출력
drawImage(img,x,y,w,h)	크기 조절	100x200
drawImage(img,0,0,canvas.width,canvas.height)	캔버스 꽉 채움	500x300
img.src	이미지 파일 경로	media/lion.jpg

---

3 fillRect와 fill

채운 사각형 예제는 fillRect로 바로 채운 사각형을 그리고, 다른 방식으로는 rect 경로를 만든 뒤 fill을 호출합니다.

fillRect

경로를 따로 만들지 않고 즉시 채운 사각형을 그립니다.

rect + fill

경로를 만든 뒤 fill과 stroke를 조합할 수 있습니다.

---

 

반응형

 

4 채운 원호

원호 내부를 채우려면 중심점으로 moveTo를 하고 arc를 만든 뒤 closePath로 닫습니다. 닫힌 경로가 되어야 부채꼴처럼 내부가 채워집니다.

1

중심 이동moveTo(80, 340)으로 중심을 시작점으로 둡니다.

2

원호 추가arc로 원호 경로를 만듭니다.

3

경로 닫기closePath로 끝점과 시작점을 연결합니다.

4

채우기와 외곽선fill 후 stroke로 내부와 외곽을 모두 그립니다.

---

5 텍스트 stroke와 fill

텍스트 예제는 strokeText로 외곽선 글자를 그리고, fillText로 채운 글자를 그립니다. font와 textAlign을 바꾸면 크기와 기준점이 달라집니다.

속성/메서드	역할	예시
font	글자 크기와 글꼴	italic 50px forte
strokeText	글자 외곽선	magenta 외곽선
fillText	글자 채움	green 채움
textAlign	x 좌표 기준	left, right

---

6 이미지와 도형의 그리기 순서

Canvas는 나중에 그린 것이 위에 보입니다. 배경 이미지 위에 텍스트를 올리고 싶으면 이미지를 먼저 그리고 텍스트를 나중에 그립니다.

순서	그리기	결과
1	이미지	배경처럼 깔림
2	사각형	이미지 위에 표시
3	원호	앞쪽에 표시
4	텍스트	가장 위에 표시 가능

---

7 자주 하는 실수

실수	증상	해결
onload 전에 drawImage	이미지가 안 그려집니다.	img.onload 안에서 drawImage를 호출합니다.
비율 무시	이미지가 찌그러집니다.	원본 비율과 출력 크기를 비교합니다.
closePath 누락	부채꼴이 채워지지 않습니다.	원호를 닫은 뒤 fill합니다.
font 지정 누락	기본 글꼴로 보입니다.	strokeText/fillText 전에 font를 지정합니다.
textAlign 착각	글자 위치가 예상과 다릅니다.	left/right 기준을 확인합니다.

---

8 복습 체크리스트

체크	통과 기준
Image	new Image와 onload 흐름을 설명합니다.
drawImage	위치와 크기 인자를 구분합니다.
fillRect	즉시 채운 사각형을 그립니다.
closePath	부채꼴 채움에 필요한 이유를 압니다.
strokeText	텍스트 외곽선을 그립니다.
fillText	텍스트 내부를 채웁니다.

---

9 추가 테스트

테스트	확인 내용
이미지 크기	100x200과 캔버스 꽉 채우기 차이를 봅니다.
원호 닫기	closePath 유무 차이를 확인합니다.
텍스트 정렬	left/right 기준점 차이를 봅니다.
그리기 순서	텍스트를 이미지 전/후에 그려 차이를 봅니다.
선 굵기	lineWidth 값을 바꿔 외곽선을 확인합니다.

---

11 이미지 로딩 디버깅

Canvas 이미지가 보이지 않을 때는 drawImage보다 이미지 로딩 상태와 경로를 먼저 확인해야 합니다. onload가 실행되지 않으면 Canvas에는 아무것도 그려지지 않습니다.

확인	원인	해결
이미지 경로	media/lion.jpg가 없음	파일 위치와 이름을 확인합니다.
onload 실행	핸들러 등록 전 src 설정	onload를 먼저 등록합니다.
캔버스 크기	그릴 영역이 작음	width/height 값을 확인합니다.
drawImage 인자	좌표나 크기 오류	x, y, w, h를 콘솔로 확인합니다.
그리기 순서	나중 도형이 이미지를 덮음	이미지와 도형 순서를 조정합니다.

A

onload 로그이미지 로딩 완료 시 console.log를 넣어 확인합니다.

B

원본 크기 확인img.width와 img.height를 확인합니다.

C

출력 크기 조정비율을 유지할지 꽉 채울지 결정합니다.

D

텍스트 오버레이이미지를 먼저 그리고 텍스트를 나중에 그립니다.

---

12 텍스트 속성 확장

Canvas 텍스트는 CSS 텍스트와 다르게 context의 상태로 제어합니다. font, textAlign, fillStyle, strokeStyle, lineWidth를 조합하면 다양한 텍스트 효과를 만들 수 있습니다.

속성	역할	예시
font	크기, 스타일, 글꼴	italic 50px forte
textAlign	x 좌표 기준	left, center, right
textBaseline	y 좌표 기준	top, middle, alphabetic
fillStyle	채움 색	green
strokeStyle	외곽선 색	magenta
lineWidth	외곽선 두께	3

---

13 개선 연습

연습	목표
이미지 비율 유지	원본 비율을 계산해 캔버스 안에 맞춥니다.
텍스트 가운데 정렬	textAlign center와 canvas.width/2를 사용합니다.
워터마크	이미지 위에 반투명 텍스트를 올립니다.
도형 레이어	사각형, 원호, 텍스트 순서를 바꿔봅니다.
이미지 실패 처리	onerror에서 안내 문구를 그립니다.

---

14 실전 점검 순서

1. 캔버스 크기 확인: CSS 크기와 width/height 속성 크기가 다른지 먼저 봅니다.
2. 컨텍스트 확인: getContext('2d') 결과가 null이면 이후 명령은 실행할 수 없습니다.
3. 이미지 완료 확인: drawImage는 이미지가 로드된 뒤 실행해야 안정적입니다.
4. 좌표 기준 확인: x, y는 이미지나 글자의 시작 위치로 해석합니다.
5. 렌더 순서 확인: 먼저 그린 요소는 뒤에 그린 요소에 가려질 수 있습니다.

캔버스 작업은 결과물이 화면에 바로 보이기 때문에 코드가 맞아 보여도 순서가 틀리면 아무것도 안 나온 것처럼 보일 수 있습니다.

---

15 좌표 계산 패턴

상황	계산 방식	주의점
가운데 이미지	(canvas.width - imgWidth) / 2	이미지 너비를 정한 뒤 계산합니다.
가운데 텍스트	canvas.width / 2	textAlign = 'center'가 함께 필요합니다.
하단 문구	canvas.height - 여백	baseline에 따라 보이는 위치가 달라집니다.
전체 배경	0, 0, canvas.width, canvas.height	clearRect나 fillRect와 함께 자주 사용합니다.
비율 유지	원본 비율로 width 또는 height 산출	가로와 세로를 따로 늘리면 이미지가 찌그러집니다.

---

16 완성도 올리는 체크리스트

• 이미지 로딩 실패 시 onerror에서 대체 배경이나 안내 텍스트를 그립니다.
• 글자 색과 배경 색의 대비를 확인해서 텍스트가 묻히지 않게 합니다.
• 반복해서 그릴 때는 clearRect로 이전 그림을 지운 뒤 다시 그립니다.
• 이미지, 도형, 텍스트를 함수로 나누면 수정할 위치가 명확해집니다.
• 캔버스 크기를 바꾸면 좌표와 폰트 크기도 함께 점검합니다.
• drawImage 인수가 3개인지 5개인지에 따라 원본 크기 사용 여부가 달라집니다.
• fillText 위치가 어긋나면 textAlign과 textBaseline을 함께 확인합니다.

---

핵심 한 줄 요약

image이미지는 onload 후 drawImage로 그립니다.

shapefillRect와 rect+fill은 채운 사각형을 만드는 두 방식입니다.

textstrokeText와 fillText로 외곽선/채움 텍스트를 나눠 그립니다.

Tags

#Canvas#JavaScript#drawImage#Image#onload#fillRect#arc#strokeText#fillText#티스토리

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

Canvas, JavaScript, drawImage, Image, onload, fillRect, arc, strokeText, fillText, 티스토리