<canvas> 태그의 정의 및 사용법

<canvas> 태그는
자바스크립트로 그리는 비트맵 그래픽 캔버스를 제공합니다.

이 태그는 단순히 그래픽 공간만을 제공하며,
실제 그래픽이나 애니메이션, 기타 시각적 이미지는 Canvas API나 WebGL API를 사용하여 그릴 수 있습니다.

예제

다음은 <canvas> 태그로 두 개의 겹치는 사각형을 그리는 간단한 예제입니다.

HTML 
<canvas id="example" width="150" height="150"></canvas>
JavaScript Canvas API로 <canvas> 태그에 두 개의 겹치는 사각형 그리기 
const canvas = document.getElementById("example");
const ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "blue";
ctx.fillRect(40, 40, 100, 100);
실제 적용된 모습

관련 속성

<canvas> 태그는 모든 글로벌 속성을 사용할 수 있으며,
이 태그에 특화된 다음의 속성들이 있습니다.

canvas 태그의 관련 속성
속성설명
width 캔버스 좌표 공간의 너비를 픽셀(px) 단위로 지정합니다.
이 값을 기정하지 않으면 기본값은 300입니다.
height 캔버스 좌표 공간의 높이를 픽셀(px) 단위로 지정합니다.
이 값을 기정하지 않으면 기본값은 150입니다.

캔버스 크기 지정의 중요성

<canvas> 태그의 크기 조정은 width와 height 속성으로 지정할 수 있습니다.
물론, CSS로 지정할 수도 있습니다.

대부분의 HTML 태그들은 CSS로 크기를 지정하는 것을 일반적이지만,
<canvas> 태그의 크기 조정은 width와 height 속성으로 지정하는 것이 더 좋습니다.

<canvas> 태그 크기를 지정할 때 width와 height 속성을 사용하는 이유

<canvas> 태그는 그래픽을 그리기 위한 비트맵 공간이므로, 크기를 결정하는 것은 중요한 요소입니다. 여기에는 세 가지 주요 이유가 있습니다.

정확한 좌표 시스템 제공

캔버스 크기는 자바스크립트가 그래픽을 그릴 때 사용하는 좌표 시스템의 범위를 정의합니다.
width와 height 속성으로 캔버스의 크기를 설정하면, 자바스크립트가 이 좌표를 기준으로 정확하게 그래픽을 그릴 수 있습니다.

캔버스의 실제 크기와 좌표 공간의 차이

width와 height 속성은 캔버스의 실제 크기가 아니라 그래픽 작업을 위한 좌표 공간의 크기를 설정합니다.

  • width는 캔버스 좌표 공간의 너비를 지정하고,
  • height는 캔버스 좌표 공간의 높이를 지정합니다.

width와 height 속성은 <canvas> 태그의 표시 크기를 설정하는 것이 아니므로, 화면에 표시되는 캔버스 크기와 그래픽을 그릴 수 있는 실제 좌표 공간을 구분해야 합니다.

CSS를 사용하여 캔버스의 크기를 지정할 때의 주의점

캔버스의 표시되는 크기는 CSS를 사용하여 변경할 수 있지만, 그렇게 하면 스타일이 적용된 크기에 맞게 렌더링하는 동안 그래픽 크기가 조정되므로 최종 그래픽 렌더링이 왜곡될 수 있습니다.

width와 height 속성 사용과 CSS 사용

<canvas> 태그 크기를 width와 height 속성을 사용해서 조정하는 것과 CSS로 조정하는 사례로 살펴보겠습니다.

원본 <canvas> 태그 크기
HTML 
<canvas id="example" width="150" height="150"></canvas>
JavaScript 
const canvas = document.getElementById("example");
const ctx = canvas.getContext("2d");

ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "blue";
ctx.fillRect(40, 40, 100, 100);
실제 적용된 모습
width와 height 속성을 사용해서 조정하는 사례

원본 <canvas>에 그래픽을 그리는 자바스크립트 파일은 동일합니다.
width 속성의 값은 원본 크기를 그대로 유지하고, height 속성을 사용해서 원본 크기의 두 배 크기로 조정하겠습니다.

HTML 
<canvas id="example" width="150" height="300"></canvas>

실제 적용된 모습을 보면 그래픽이 왜곡되지 않고, 원본 크기의 너비와 높이 비율에 맞추어 렌더링됩니다.

실제 적용된 모습
CSS로 조정하는 사례

원본 <canvas>에 그래픽을 그리는 자바스크립트 파일은 동일합니다.
CSS width 속성의 값은 원본 <canvas>의 width 속성값을 그대로 유지하고, CSS height 속성의 값을 원본 <canvas>의 height 속성값의 두 배 크기로 지정했습니다.

HTML 
<style>
    #example {
        width: 150px;
        height: 300px;
    }
</style>
<canvas id="example" width="150" height="150"></canvas>

실제 적용된 모습을 보면 그래픽이 왜곡되어, 원본 크기의 너비와 높이 비율에 맞지 않게 렌더링됩니다.

실제 적용된 모습
권장 사항
  • 좌표 시스템 조정이 필요할 때는 width와 height 속성으로 정확한 캔버스 크기를 지정하는 것이 가장 좋습니다.
  • CSS로 크기를 조정하는 방법은, 주로 캔버스를 표시하는 영역을 다룰 때 사용하며, 그래픽 작업에 직접적인 영향을 미치지 않도록 하는 것이 좋습니다.

접근성 고려 사항

<canvas> 태그는 그래픽을 그리기 위한 비트맵 공간으로, 그려진 콘텐츠에 대한 정보를 스크린 리더나 보조 기술에 제공하지 않습니다. 따라서 <canvas> 태그를 사용하여 시각적인 그래픽을 생성하더라도, 해당 그래픽은 중요한 의미나 정보를 전달하는 데 사용하지 않는 것이 좋습니다.

그래픽이 필수적인 정보를 담고 있다면 다음 방법을 고려하세요.

  • <canvas> 태그에 aria-label이나 aria-labelledby 속성을 사용하면 웹 접근성 향상에 도움이 됩니다.
  • <canvas> 태그와 함께 그래픽의 의미를 텍스트로 표현한 대체 콘텐츠를 제공하세요.
  • 일반적으로 접근성이 매우 중요한 웹 사이트나 앱에서는 정보를 제공하는 캔버스 사용을 피해야 합니다.
HTML 
<!-- 접근성을 위해 aria-label로 레이블 제공 -->
<canvas id="example" aria-label="접수 마감: 2024년 12월 31일"></canvas>

위 예제는 aria-label 속성으로 스크린 리더를 위한 레이블을 제공한 것입니다.

HTML 
<!-- 텍스트로 표현한 대체 콘텐츠를 제공 -->
<canvas id="example"></canvas>
<p>접수 마감: 2024년 12월 31일</p>

위 예제에서는 대체 콘텐츠를 제공한 것입니다.

기술적인 문법 요약

datalist 태그의 구문 형식
암시적인 role 속성 값 없음
허용된 role 속성 값 모두(Any)

브라우저 호환성

canvas 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<canvas> 1 12 1.5 2

명세서

canvas 태그의 명세서 사양
명세서 사양
<canvas> HTML Standard
#the-canvas-element

참고문헌

같이 보기