Canvas API 1 - 시작하기

MDN + 기타 자료들을 공부하며 이해한 내용을 정리한 글입니다.

캔버스 <canvas> 환경 설정

Javascript 와 HTML <canvas> 엘리먼트를 통해 그래픽을 그리는 수단을 제공한다. 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용된다. 주로 2D 그래픽에 중점을 두고 있다.

현재 대부분의 주요 브라우저에서 지원된다.

<canvas> 요소를 지원하지 않는 브라우저에서는 어떻게 보이나요?

대체 콘텐츠를 제공해야 한다. <canvas> 태그 안에 대체 컨텐츠를 삽입한다. <canvas> 태그를 지원하 지 않는 브라우저는 컨테이너를 무시하고 컨테이너 내부의 대체 콘텐츠를 렌더링할 것이다.

예시

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

지원 여부는 getContext 메서드를 통해 알 수 있다.

var canvas = document.getElementById('myCanvas');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

<canvas> 요소에는 width 와 height 두 속성만 있으며 이것도 선택사항이다. 초기 설정 크기는 300px * 150px 이고, HTML height 와 width 속성, DOM 프로퍼티를 사용하여 바꿀 수 있다.

성공 코드

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var canvas = document.getElementById("myCanvas");

canvas.width = 100;
canvas.height = 300;

var ctx = c.getContext("2d");

</script>

실패 코드

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

canvas.width = 100;
canvas.height = 300;

</script>

두 번째 블록에서는 원하는대로 canvas element 의 가로와 세로길이를 변경할 수 없다. javascript 는 위에서 아래로 한 줄 한 줄 코드를 실행시키는데, canvas 의 width, height 를 수정하기 전에 이미 canvas 의 context 를 ctx 에 할당했기 때문이다.

<canvas> 요소는 css 에 의해서도 임의로 크기를 지정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정되고, css 크기 지정이 초기 캔버스 비율을 고려하지 않으면 왜곡될 수 있다. 만약 왜곡된 경우 css 를 사용하지 말고 <canvas> 속성에서 width 와 height 속성을 지정할 것을 MDN 에서 권하고 있다.

렌더링 컨텍스트

<canvas> 엘리먼트는 고정 크기의 드로잉 영역을 생성하고 하나 이상의 렌더링 컨텍스(rendering contexts)를 노출하여, 출력할 컨텐츠를 생성하고 다룬다. 렌더링 컨텍스트는 2D, 3D 도 가능하다.

getContext()

캔버스는 처음에 비어있다. 캔버스에 무언가를 그리려면, 어떤 스크립트가 해당 캔버스 렌더링 컨텍스트에 접근하여 무언가를 그려야 한다. <canvas> 요소는 getContext() 메서드를 이용해서 렌더링 컨텍스트와 그리기 함수들을 사용할 수 있다.

// <canvas> 요소를 표시할 DOM 을 검색
var canvas = document.getElementById('exampleCanvas');
// 렌더링 컨텍스트에 접근
var ctx = canvas.getContext('2d');