Canvas는 HTML 요소 중 하나입니다. HTML에서 <canvas>를 사용해 작성한 후, 자바스크립트로 조작할 수 있습니다. 기본적으로 Canvas API는 2D그래픽을 그리지만, WebGL API를 함께 사용한다면 3D그래픽 또한 그릴 수 있습니다. Canvas는 애니메이션을 추가할 수 있는 하얀 도화지라고 생각하시면 좋습니다. 기본적인 사용법과 더불어 다양한 라이브러리들을 사용해 쉽고 빠르게 HTML 상에 그림을 그릴 수 있습니다.
<canvas> 요소 자체는 비트맵에 불과해 그려진 객체에 대한 어떠한 정보도 제공하지 않습니다. 따라서 시멘틱같은 접근성 도구에 노출되지 않습니다. 그래서 <canvas> … </canvas>안의 내용을 대체 콘텐츠로 추가합니다. 이 방법은 하위 DOM을 읽고 해석할 수 있는 스크린리더에서 매우 유용합니다.
Canvas 요소는 그래프, 게임 그래픽, 예술적 이미지를 즉시 렌더링하는 데에는 사용성이 좋지만, 접근성이 필요한 웹사이트에는 Canvas 사용을 권하지 않습니다. 예를 들어 설명하자면, 페이지의 제목 텍스트를 렌더링하기 위해 <canvas>를 쓰는 것은 브라우저가 코드를 제대로 이해하지 못하고 잘못된 정보를 전달할 수 있기 때문에 제목 태그를 사용해 마크업을 제대로 하는 것이 중요합니다.
본격적으로 Canvas를 사용하기 전에 우선 본인의 브라우저가 Canvas를 지원하는지 확인해야 합니다.
이를 확인할 수 있는 사이트로는 ‘Mozilla’와 ‘Can I Use?’가 있습니다.
위의 그림들과 같이 각 사이트에서 본인의 브라우저가 Canvas를 지원하는지 확인할 수 있습니다. 본인이 사용하고 있는 브라우저가 보이지 않거나 Canvas를 지원하지 않는 경우에는 Canvas 요소를 의도대로 사용할 수 없습니다.