Canvas 기초 도형 완전 정리

 

 

Web Development · Canvas

Canvas 기초 도형

canvas 만들기, 2D context, 사각형, 선, 삼각형, 텍스트 그리기를 정리합니다.

시작 오늘 분석할 코드

Canvas는 HTML 안에 그림을 그릴 수 있는 비트맵 영역입니다. canvas 요소 자체는 도화지고, 실제 선과 도형은 JavaScript에서 2D context를 얻어 그립니다.

const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); context.beginPath(); context.rect(30, 30, 50, 50); context.strokeStyle = 'blue'; context.stroke(); context.fillText('Text in Canvas', 100, 50);

canvas브라우저 안의 그리기 영역입니다.

contextCanvas에 실제로 그리는 도구 객체입니다.

beginPath새 경로를 시작합니다.

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

stroke외곽선을 그립니다.

fillText텍스트를 바로 그립니다.

---

1 canvas 요소 만들기

canvas는 width와 height 속성으로 실제 그리기 영역 크기를 정합니다. CSS 배경색을 주면 도화지 영역이 눈에 보입니다.

요소	크기	배경
canvas1	150x100	lightblue
canvas2	150x100	violet
canvas3	300x150	yellow
myCanvas	250x150	aliceblue

---

2 2D context 얻기

그림을 그리려면 먼저 DOM에서 canvas를 찾고 getContext("2d")를 호출합니다. 반환된 context 객체가 실제 그리기 도구입니다.

getElementById

→

canvas

→

getContext("2d")

---

3 경로와 beginPath

Canvas에서 도형은 경로를 만들고 그 경로를 stroke 또는 fill로 실제 화면에 반영하는 흐름이 많습니다. 새 도형을 독립적으로 그리려면 beginPath로 빈 경로를 시작합니다.

메서드	역할	화면 반영
beginPath()	새 경로 시작	아직 안 그림
rect()	사각형 경로 추가	아직 안 그림
moveTo()	시작점 이동	아직 안 그림
lineTo()	선 경로 추가	아직 안 그림
stroke()	외곽선 그리기	화면 반영
fill()	내부 채우기	화면 반영

---

 

반응형

 

4 사각형 stroke와 fill

맛보기 예제는 파란 외곽선 사각형과 violet 채운 사각형을 각각 그립니다. strokeStyle은 선 색, fillStyle은 채우기 색입니다.

stroke

경로의 외곽선만 그립니다.

fill

경로 내부를 색으로 채웁니다.

---

5 반복 사각형

사각형 예시는 for문으로 위치를 조금씩 바꿔 5개의 사각형 경로를 추가하고, 마지막에 한 번 stroke합니다.

i	x	y	크기
0	10	10	50x50
1	40	20	50x50
2	70	30	50x50
4	130	50	50x50

---

6 선으로 삼각형

삼각형은 moveTo로 첫 점을 잡고 lineTo로 다음 점을 연결합니다. 마지막에 처음 좌표로 다시 lineTo하면 닫힌 삼각형이 됩니다.

1

moveTo(120, 20)을 시작점으로 잡습니다.

2

lineTo(20, 50)까지 선을 추가합니다.

3

lineTo(150, 120)까지 선을 추가합니다.

4

close처음 점으로 돌아가 삼각형을 닫습니다.

---

7 텍스트 그리기

fillText는 경로에 넣지 않고 바로 텍스트를 그립니다. font로 글꼴과 크기를 지정하고 fillStyle로 색을 정합니다.

속성/메서드	역할	예시
font	글자 크기와 글꼴	20px Gothic
fillStyle	글자 채움 색	green
fillText	텍스트 그리기	Text in Canvas
x, y	텍스트 기준 좌표	100, 50

---

8 자주 하는 실수

실수	증상	해결
getContext 누락	그리기 메서드를 호출할 수 없습니다.	canvas.getContext("2d")를 호출합니다.
beginPath 누락	이전 경로까지 같이 그려집니다.	새 도형 전에 beginPath를 씁니다.
stroke/fill 누락	경로만 만들고 화면에 안 보입니다.	stroke 또는 fill을 호출합니다.
좌표 착각	도형이 예상 밖에 그려집니다.	x는 오른쪽, y는 아래쪽으로 증가합니다.
CSS 크기만 변경	그림이 늘어나 보입니다.	canvas width/height 속성을 함께 확인합니다.

---

9 복습 체크리스트

체크	통과 기준
canvas	그리기 영역을 만드는 태그임을 설명합니다.
context	2D 그리기 도구를 얻는 흐름을 압니다.
rect	사각형 경로를 만들 수 있습니다.
line	moveTo와 lineTo로 선을 연결합니다.
stroke/fill	외곽선과 채우기 차이를 설명합니다.
text	fillText로 텍스트를 그립니다.

---

10 추가 테스트

테스트	확인 내용
캔버스 크기	width/height를 바꿔 도화지 크기 변화를 봅니다.
사각형 위치	rect x/y 값을 바꿔 이동을 확인합니다.
삼각형 좌표	lineTo 좌표를 바꿔 모양을 봅니다.
채우기 변경	fillStyle 색을 바꿔 확인합니다.
텍스트 위치	fillText 좌표를 바꿔 기준점을 봅니다.

---

11 Canvas 좌표계

Canvas 좌표는 왼쪽 위가 (0, 0)이고, x는 오른쪽으로, y는 아래쪽으로 증가합니다. 일반 수학 좌표와 y 방향이 다르다는 점을 기억해야 합니다.

좌표	위치	설명
(0, 0)	왼쪽 위	캔버스 시작점
(100, 0)	오른쪽 이동	x만 증가
(0, 100)	아래쪽 이동	y만 증가
(canvas.width, canvas.height)	오른쪽 아래	캔버스 끝 영역

A

x 변경rect의 첫 번째 값을 바꾸면 좌우 위치가 바뀝니다.

B

y 변경rect의 두 번째 값을 바꾸면 위아래 위치가 바뀝니다.

C

width 변경세 번째 값은 사각형 너비입니다.

D

height 변경네 번째 값은 사각형 높이입니다.

---

12 경로 상태와 즉시 그리기

rect, moveTo, lineTo는 경로를 만들고 stroke/fill이 실제로 그립니다. 반면 fillText는 경로를 만들지 않고 바로 텍스트를 그립니다.

분류	메서드	특징
경로 생성	rect	사각형 경로를 추가합니다.
경로 생성	moveTo	펜 위치를 옮깁니다.
경로 생성	lineTo	직선 경로를 추가합니다.
경로 출력	stroke	경로 외곽선을 그립니다.
경로 출력	fill	경로 내부를 채웁니다.
즉시 출력	fillText	문자를 바로 그립니다.

---

13 개선 연습

연습	목표
채운 삼각형	lineTo로 만든 삼각형에 fill을 적용합니다.
사각형 겹치기	stroke와 fill 사각형을 겹쳐 투명도 차이를 봅니다.
색상 배열	반복문에서 strokeStyle을 배열 색으로 바꿉니다.
텍스트 정렬	textAlign 값을 바꿔 기준점 차이를 봅니다.
격자 그리기	반복문으로 10px 간격 선을 그려 좌표계를 확인합니다.

---

14 그리기 순서 점검

Canvas는 나중에 그린 것이 먼저 그린 것 위에 올라옵니다. 겹친 도형의 앞뒤가 이상하면 그리기 순서를 확인해야 합니다.

순서	작업	확인
1	배경 canvas 표시	aliceblue 영역이 보입니다.
2	첫 사각형 stroke	파란 외곽선이 보입니다.
3	두 번째 사각형 fill	violet 채움이 겹쳐 보입니다.
4	텍스트 fillText	도형 위에 글자가 보입니다.
5	새 도형 추가	가장 마지막에 그린 것이 위에 보입니다.

1

도화지 확인canvas 크기와 배경색을 먼저 확인합니다.

2

context 확인getContext 결과가 null이 아닌지 봅니다.

3

경로 확인beginPath, rect, lineTo 순서를 확인합니다.

4

출력 호출stroke, fill, fillText가 실제로 호출되는지 봅니다.

---

15 최종 점검

점검	통과 기준
canvas 속성	width와 height가 HTML 속성으로 지정되어 있습니다.
context	2d context를 변수에 저장합니다.
경로 분리	도형별 beginPath 사용 여부를 확인합니다.
사각형	rect 좌표와 크기를 설명할 수 있습니다.
선	moveTo와 lineTo 연결 흐름을 압니다.
텍스트	fillText가 즉시 그리기 메서드임을 압니다.
순서	나중에 그린 도형이 위에 보인다는 점을 압니다.

---

핵심 한 줄 요약

canvascanvas는 도화지고 context는 그리기 도구입니다.

pathbeginPath로 경로를 만들고 stroke/fill로 화면에 반영합니다.

shaperect, lineTo, fillText로 기본 도형과 텍스트를 그립니다.

Tags

#Canvas#JavaScript#getContext#rect#moveTo#lineTo#stroke#fill#fillText#티스토리

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

Canvas, JavaScript, getContext, rect, moveTo, lineTo, stroke, fill, fillText, 티스토리