JavaScript Academy · 강의

Canvas 컨텍스트 설정하기

2D 렌더링 컨텍스트를 가져오고 구성합니다.

Canvas 컨텍스트 설정하기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Canvas 프로그래밍 인터페이스란 무엇인가요?

Canvas 프로그래밍 인터페이스를 사용하면 JavaScript로 <canvas> 요소에 2D 그래픽을 그릴 수 있습니다. 픽셀로 이루어진 그리기 영역과 도형, 이미지, 텍스트를 그리는 명령을 사용할 수 있습니다.

마크업은 하나의 <canvas> 태그입니다.
모든 그리기 작업은 JavaScript에서 컨텍스트 객체를 통해 이루어집니다.

<canvas id="board" width="320" height="200"></canvas>

컨텍스트 가져오기

캔버스 요소에서 getContext('2d')를 호출하여 CanvasRenderingContext2D를 가져옵니다. 모든 그리기 명령은 이 객체를 통해 실행됩니다.

const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
console.log(ctx.constructor.name); // CanvasRenderingContext2D

좌표계

원점 (0, 0)은 왼쪽 위 모서리입니다. X는 오른쪽으로 증가하고 Y는 아래쪽으로 증가합니다. 320x200 캔버스의 오른쪽 아래 모서리는 (320, 200)입니다.

너비와 높이 속성

width와 height HTML 속성은 픽셀 단위의 그리기 버퍼 크기를 설정합니다. 생략하면 기본값은 300x150입니다. JS에서 이 값을 설정하면 캔버스도 지워집니다.

const canvas = document.getElementById("board");
canvas.width = 400;
canvas.height = 300;
console.log(canvas.width, canvas.height); // 400 300

CSS 크기와 버퍼 크기 비교

CSS width/height는 화면에서 캔버스를 늘리지만 픽셀 버퍼는 변경하지 않습니다. 두 값이 속성과 다르면 그림이 흐릿하거나 늘어나 보입니다. 선명한 출력을 위해 두 크기를 일치시키세요.

canvas.width = 400;  // buffer pixels
canvas.style.width = "400px"; // display size — match it

고DPI 화면 처리하기

레티나 디스플레이에서는 devicePixelRatio가 보통 2입니다. 선이 선명하게 유지되도록 버퍼를 확대하고 컨텍스트를 축소하세요.

const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = "400px";
canvas.style.height = "300px";
ctx.scale(dpr, dpr);

채우기와 선 스타일 설정하기

그리기 상태는 컨텍스트에 저장됩니다. fillStyle은 채우기 색을 설정하고 strokeStyle은 윤곽선 색을 설정합니다. 두 속성에는 어떤 CSS 색상 문자열이든 사용할 수 있습니다.

ctx.fillStyle = "#3498db";
ctx.strokeStyle = "rgba(231, 76, 60, 0.8)";
ctx.lineWidth = 4;

첫 번째 그림 그리기

컨텍스트를 준비하면 바로 그릴 수 있습니다. fillRect(x, y, w, h)는 현재 fillStyle을 사용하여 채워진 사각형을 그립니다.

const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 150, 80);

캔버스 지우기

clearRect(x, y, w, h)는 직사각형 영역을 투명한 상태로 지웁니다. 전체 버퍼를 지우는 것은 각 애니메이션 프레임에서 일반적으로 수행하는 첫 단계입니다.

ctx.clearRect(0, 0, canvas.width, canvas.height);

상태 저장 및 복원하기

save()는 현재 스타일과 변환을 스택에 저장하고, restore()는 이를 다시 꺼냅니다. 이렇게 하면 임시 변경 사항을 다른 작업과 분리할 수 있습니다.

ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // fillStyle reverts to previous value

기능 감지

사용하기 전에 getContext가 존재하는지 확인하여 매우 오래된 브라우저에 대비하세요.

const canvas = document.getElementById("board");
if (canvas.getContext) {
  const ctx = canvas.getContext("2d");
  // safe to draw
} else {
  console.log("Canvas not supported");
}

빠른 확인

캔버스 설정에 대한 이해도를 확인해 보세요.

복습: 캔버스 설정

캔버스를 가져오고, getContext('2d')를 호출하고, 왼쪽 위 원점을 이해하고, 버퍼 크기와 CSS 크기를 설정하고, devicePixelRatio로 고DPI 화면을 처리하고, fillStyle/strokeStyle을 구성하는 방법을 배웠습니다. 다음에는 도형과 경로를 그려 보겠습니다.

자주 묻는 질문

“Canvas 컨텍스트 설정하기” 강의는 무료인가요?

네 — “Canvas 컨텍스트 설정하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Canvas 컨텍스트 설정하기”에서 뭘 배우나요?

2D 렌더링 컨텍스트를 가져오고 구성합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“Canvas 컨텍스트 설정하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기