Canvas는 웹 페이지에서 그림을 그리거나 그래픽을 렌더링할 수 있는 HTML5 요소이다. 기본적으로 캔버스는 비트맵 이미지와 유사한 2D 렌더링 컨텍스트를 제공하며, 개발자가 자바스크립트를 사용하여 동적으로 그래픽을 생성하고 조작할 수 있게 한다. Canvas는 어떠한 특정 그래픽이나 스타일을 가지고 있지 않으며, 단지 그래픽을 그릴 수 있는 공간을 제공하는데, 이 공간을 채우기 위해서는 JavaScript를 사용하여 2D 또는 WebGL 컨텍스트에 접근하고 그 위에 그림을 그리는 메서드를 사용해야 한다.
즉, 데이터 시각화 및 사용자 인터페이스를 동적으로 만들고 그래픽 작업을 해야 하는 상황에서 주로 사용된다.
Canvas를 React에서 사용할 때는 기본적인 React 훅과 Canvas API를 결합하여 동적인 그래픽을 만들 수 있다.
Canvas는 이름 그대로, 개발자가 원하는 시각화를 캔버스에 그림 그리듯이 구현할 수 있도록 다양한 메서드를 제공하는데, API의 종류가 매우 광범위 하다. 마치 화가가 도화지에 그림을 그리듯이 개발자가 시각화 하고 싶은 이미지, 그림을 코드로 그릴 수 있게 관련 도구들을 제공한다.
MDN Web Docs의 Canvas API 튜토리얼에서는 아래와 같은 주요 주제들을 다루고 있다.