html5
CHAPTER 14 / 33
읽기 약 2분
SYNTAX
캔버스 기초: <canvas>
핵심 개념
브라우저 화면에 직접 그림을 그릴 수 있는 하얀 도화지예요. 자바스크립트라는 연필로 선과 도형을 그려요.
코드 분석
<canvas id='myCanvas' width='200' height='100' style='border: 1px solid #000;'></canvas>
<br>
<button onclick='drawRect()'>사각형 그리기</button>
<script>
function drawRect() {
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(20, 20, 150, 60);
}
</script>AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 canvas 그리기 코드의 메모리 누수, requestAnimationFrame 잘못된 사용, 좌표 계산 버그를 찾아 프로덕션 수준으로 개선해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
<canvas>로 만들 수 있는 실전 미니 프로젝트 3개를 (차트, 게임, 시그니처 패드) 각 핵심 코드와 함께 보여줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 canvas 애니메이션 전체를 분석해서 FPS, 메모리, 모바일 성능 병목, 레티나 디스플레이 대응을 종합 리포트로 만들어줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
2026년에 canvas vs SVG vs WebGL 중 실무에서 어떤 게 가장 많이 쓰이는지, 신입 개발자가 뭘 먼저 배우면 좋은지 알려줘.
⭐ 이것만 기억하세요
캔버스 기초: <canvas>는 이 3가지만 확실히 잡으세요
1.canvas 태그만 놓으면 빈 사각형일 뿐 — JavaScript의 getContext('2d')를 호출해야 비로소 그릴 수 있습니다
2.canvas는 픽셀 기반 래스터 그래픽으로, 매 프레임을 JS로 다시 그려야 해서 게임이나 차트에 적합합니다
3.다음 챕터에서 픽셀이 아닌 수학 공식으로 그리는 벡터 방식, SVG를 배웁니다
공유하기
진행도 14 / 33