HTML5 Canvas의 getContext() 메서드 완벽 이해하기

HTML5 Canvas의 getContext란 무엇인가?

HTML5의 <canvas> 요소는 getContext()라는 DOM 메서드를 제공합니다. 이 메서드는 캔버스에 그림을 그리기 위한 렌더링 컨텍스트(rendering context)와 해당 컨텍스트가 지원하는 다양한 드로잉 함수들을 가져오는 역할을 합니다.

getContext() 메서드는 하나의 매개변수를 받으며, 이 매개변수는 사용할 컨텍스트의 유형을 지정합니다. 가장 널리 사용되는 값은 2차원 그래픽을 위한 '2d'입니다.

getContext() 기본 문법

var ctx = canvas.getContext('2d');

위 코드처럼 컨텍스트 유형으로 '2d'를 전달하면, 캔버스에 도형, 텍스트, 이미지 등을 그릴 수 있는 2D 렌더링 컨텍스트 객체가 반환됩니다.

브라우저의 캔버스 지원 여부 확인하기

모든 브라우저가 <canvas> 요소를 지원하는 것은 아니기 때문에, 실제 코드를 작성하기 전에 getContext 메서드의 존재 여부를 확인하는 것이 좋습니다. 아래 예제는 필요한 컨텍스트를 가져오면서 동시에 브라우저의 캔버스 지원 여부를 검사하는 코드입니다.

var canvas = document.getElementById("mycanvas");
if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    // 여기에 그리기 코드를 작성합니다
} else {

    // 캔버스를 지원하지 않는 경우의 대체 코드를 작성합니다
}

코드 설명

document.getElementById()를 통해 캔버스 요소를 가져온 후, if (canvas.getContext) 조건문으로 해당 메서드가 존재하는지 확인합니다. 메서드가 존재하면 getContext('2d')를 호출하여 2D 드로잉 컨텍스트를 얻고, 실제 그리기 작업을 수행합니다. 만약 존재하지 않는다면 else 블록에서 캔버스를 지원하지 않는 브라우저를 위한 대체 처리(예: 안내 메시지 표시)를 진행할 수 있습니다.

참고로 최신 브라우저에서는 '2d' 외에도 WebGL('webgl', 'webgl2')과 같은 3D 렌더링 컨텍스트도 지원하므로, 용도에 맞게 컨텍스트 유형을 선택할 수 있습니다.