기초 지식 14 / 21

그림 그리는 도화지: 캔버스

손가락이 지나간 자리를 점으로 이어서 선을 그려요. 게임 화면도 이 도화지에 그려요.

캔버스는 프로그램이 직접 그림을 그리는 도화지예요. 손가락(또는 마우스)을 누르는 순간, 움직이는 순간, 떼는 순간을 이벤트로 받아서, 움직일 때마다 방금 자리에서 지금 자리까지 짧은 선을 그어요. 아주 짧은 선이 이어지면 부드러운 그림이 돼요.

끌면 선이 그려지는 도화지

<canvas id="paper"></canvas>← 도화지 (HTML)

const pen = paper.getContext("2d");← 그림 도구(붓)를 꺼내요

pen.strokeStyle = "tomato"; pen.lineWidth = 8;← 붓 색과 굵기

paper.addEventListener("pointermove", draw);← 손가락·마우스가 움직일 때마다 draw를 해요

pen.lineTo(x, y); pen.stroke();← 지금 자리까지 선을 긋고 칠해요

다 그린 도화지는 그림 파일로 바꿀 수 있어요. 그래서 '그림 저장'으로 내려받거나, AI에게 보여 주고 무엇을 그렸는지 물어볼 수도 있어요.

paper.toDataURL("image/png")← 도화지를 그림 파일 글자로 바꿔요

휴대폰에서 그릴 때 화면이 같이 밀리면 'touch-action: none'이라는 꾸미기 규칙으로 막아요. AI에게 '휴대폰에서 그릴 때 화면이 움직여'라고 말하면 고쳐 줘요.

내 프로그램에서 찾아보기

작업실 '코드' 탭에서 이 글자를 찾아보세요.

canvasgetContextpointermovelineTo

작업실에서 해 보기

채팅창에 이렇게 보내 보세요.

“도화지 배경을 연한 노란색으로 바꾸고 무지개색 붓을 추가해줘”

🧩 이 내용이 나오는 따라 만들기