웹 입문

Canvas API 기초

Canvas API는 DOM 요소를 배치하는 방식이 아니라 픽셀 기반 2D 컨텍스트에 선, 도형, 텍스트를 직접 그리는 방식입니다. 상태 저장과 재그리기 책임도 코드가 직접 관리합니다.

canvas 요소를 준비하고 2D 렌더링 컨텍스트로 선, 도형, 텍스트를 그리는 기본 절차를 확인합니다.

Canvas API 기초 흐름

1

Canvas API 개요 및 요소

Canvas는 그려진 결과를 DOM 노드로 보관하지 않고 픽셀 버퍼에 남깁니다.

2

Canvas 도형 그리기

Canvas에서는 그리기 상태를 정한 뒤 도형 경로를 만들고 fill 또는 stroke 호출로 화면에 반영합니다.

3

텍스트(Text) 그리기

텍스트를 그리는 메서드와 스타일 속성이 있습니다.

4

경로(Paths) 상태 저장 및 복원

캔버스 컨텍스트의 현재 그리기 상태(색상, 선 두께, 변형 등)를 저장하고 나중에 복원할 수 있습니다.