[Canvas] Canvas API에 대해 알아보자.

최근 참여 중인 프로젝트에서 SVG 못지 않게 많은 부분을 차지하고 있는 것이 바로 이 Canvas인데, 그 전에도 QML쪽에서 어떤 요소들을 그릴 때 가볍게는 사용해 본 적이 있지만 아주 본격적으로 써본 적은 없어서 많은 어려움을 겪었었고, 지금도 살짝 남아있다. Canvas에 대해서도 공부해보면서 그 기록을 남기고자 한다.

Canvas API는 Javascript를 활용해 그림을 그리는 API(Application Program Interface)로, 주로 2D 그래픽에 초점을 두고 있으나 3D 그래픽도 제한적으로 지원하는 인터페이스이다. 때문에 Javascript 문법을 많이 따르며, Javascript 숙련도가 높으면 비교적 쉽게 다룰 수 있는 API이다.

HTML의 <canvas> 엘리먼트나 QML의 Canvas {} 컴포넌트 등을 통해서 호출할 수 있으며, 이렇게 호출된 뒤에는 Javascript를 활용해 그리게 된다. .HTML의 <canvas>엘리먼트는 아래와 같이 호출한다.

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

<script>
	const canvas = document.getElementById("canvas");
    const ctx = ctx.getContext("2d");
 	// Code To Draw
</script>

QML의 Canvas 컴포넌트는 아래와 같이 호출한다.

Canvas {
	width: 300
    height: 150
    onPaint: {
    	const ctx = getContext("2d");
    	// Code To Draw
    }
}

HTML의 경우 엘리먼트 외부의 <script> 태그를 통해 포인팅(pointing) 후 사용하다보니 이를 위한 코드가 포함되지만, QML은 컴포넌트 내부에서 선언되므로 포인팅 과정이 없다는 점이 차이점이다. 동일하게 getContext(param)라는 메소드를 통해 시작되는 것을 확인할 수 있는데, getContext는 뒤에서 그릴 내용에 대한 맥락(drawing context)을 얻는(get) 과정이라고 이해할 수 있다. 즉, '드로잉 모드'라고 이해하면 비슷하다. 이 메소드에 사용될 수 있는 파라미터는 아래와 같다.

• 2d (CanvasRenderingContext2D)
• webgl1 (WebGLRenderingContext)
• webgl2 (WebGL2RenderingContext)
• bitmaprender (ImageBitmapRenderingContext)

 위의 Context에 따라 지원하는 브라우저나 기기 호환성이 달라지기 때문에, 프로젝트 별로 환경에 따라 미리 사용 가능 여부를 타진하는 것이 좋은데, 예를 들어 QML의 경우에는 위의 4가지 중 '2d' 외에는 현재까지 지원하지 않는다. Context2D 는 말 그대로 2차원에서 그림을 그리는 용도로 사용되며, 3차원을 지원하는 것은 webgl2를 통해 사용할 수 있다.

Canvas가 가장 대표적으로 사용되는 용도가 웹 사이트 등에 실시간성(real-time) 애니메이션 공간을 만드는 용도인데, 정적인 HTML이나 QML 등 표시언어(Markup)는 화면 상에 출력된 문서와도 같아서 그 자체가 자체적인 동기화 및 역동성을 가지려면 Javascript와 같은 언어를 통한 조작이 필요하기 때문이다. 이러한 조작을 기본적으로 할 수 있도록 할당되는 인터페이스가 바로 Canvas API 이다. <canvas>나 Canvas{}와 같이 Canvas로 선언되고 해당 영역에 '드로잉 콘텍스트'를 설정하여 어떤 식으로 그림을 그릴지 결정하면, 해당 영역은 Javascript 기반의 비동기적(asyncronous) 통신으로 동기화되는 실시간성의 공간이 된다.

Canvas에 대해서 더 세부적인 사항들을 추가로 다뤄볼 예정이며, 프로젝트에서 연구하던 방향으로의 실패과정과 성공사례도 문제가 되지 않는 선에서 담아보고자 한다.