Canvas API
Canvas API는 HTML의 canvas 요소에 도형과 텍스트, 이미지 및 픽셀 데이터를 프로그램에서 그릴 수 있도록 하는 웹 그래픽 인터페이스다. JavaScript로 2차원 렌더링 컨텍스트를 제어하여 게임 인터페이스, 차트, 그림 편집기, 이미지 처리 및 동적 시각화에 활용한다....
| 분류 | 스크립트 기반의 픽셀·도형·텍스트 렌더링 |
|---|---|
| 정식 명칭 | 2차원 그래픽 프로그래밍 인터페이스 |
| 관련 기술 | World Wide Web, HTML, HTTP, 웹 브라우저 |
| 관련 규격 | WHATWG HTML: Canvas |
Canvas API는 HTML의 canvas 요소에 도형과 텍스트, 이미지 및 픽셀 데이터를 프로그램에서 그릴 수 있도록 하는 웹 그래픽 인터페이스다. JavaScript로 2차원 렌더링 컨텍스트를 제어하여 게임 인터페이스, 차트, 그림 편집기, 이미지 처리 및 동적 시각화에 활용한다. HTML의 일반 요소처럼 각 도형을 별도의 문서 노드로 제공하는 것이 아니라 하나의 그래픽 표면에 결과를 그린다.
2차원 컨텍스트에서는 선과 곡선, 직사각형, 패스, 텍스트와 이미지를 그리는 메서드를 사용할 수 있다. fillStyle, strokeStyle, 변환 행렬 및 클리핑 영역은 현재 드로잉 상태를 결정한다. 상태 저장과 복원을 적절하게 사용하면 계층적 객체를 가진 장면을 순서대로 렌더링할 수 있다.
캔버스는 픽셀 단위의 그래픽을 제어할 수 있으며 ImageData 인터페이스를 통해 원시 픽셀 값을 읽거나 변경할 수 있다. 브라우저의 디스플레이 배율과 요소의 CSS 크기는 내부 비트맵 해상도와 다를 수 있으므로 선명한 출력을 위해 크기를 일관되게 설정해야 한다. 지나치게 큰 캔버스나 잦은 전체 화면 갱신은 메모리와 CPU 부하를 증가시킨다.
캔버스는 WebGL을 통한 3차원 렌더링에도 사용할 수 있지만 2D Canvas API와 WebGL의 명령 모델은 서로 다르다. 일부 환경에서는 OffscreenCanvas를 이용해 워커에서 렌더링 작업을 수행할 수 있다. 사용자 입력과 애니메이션 프레임을 연결할 때는 requestAnimationFrame을 활용하여 브라우저의 화면 갱신 주기와 조정한다.
캔버스 내부에 그린 그림은 DOM 요소처럼 개별적인 접근성 의미를 자동 제공하지 않는다. 따라서 중요한 사용자 인터페이스와 그래프에는 대체 텍스트, 별도의 HTML 컨트롤이나 데이터 설명을 제공해야 한다. 외부 이미지와 미디어를 그린 경우에는 출처 정책에 따라 픽셀 읽기와 데이터 URL 생성이 제한될 수 있다.[1]