[API/Canvas] Canvas API란

 

Canvas API

 

---

 

기본 형태

Canvas API는 Javascript와 HTML <canvas> element를 이용하여 그래픽을 그릴 수 있습니다. <canvas> 요소는 그래픽을 위한 컨테이너 역할을 하며, 실제로 그래픽을 그리기 위해서는 Javascript를 사용해야 합니다. 주로 2D 그래픽을 그릴 때 사용되며 3D 그래픽에는 WebGL API를 사용합니다.

 

HTML

<canvas id="canvas"></canvas>

 

Javascript

document.getElementById('canvas') 메소드는 'canvas' 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 canvas 객체를 반환합니다. HTMLCanvasElement.getContext(contextType) 메소드는 문서의 <canvas> 요소에 그래픽을 그리기 위한 방법 및 속성을 제공하는 객체를 반환합니다. 

• context : 특정 행위를 위해 모아놓은 코드/데이터/정보의 모음 (≒ 페인트 브러쉬)
• contextType : 그래픽을 그릴 canvas 종류를 나타내는 식별자 (2D, bitmaprenderer, webgl, webgl2)

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

 

<canvas> 의 요소에는 width와 height 두 속성만 존재하며, 각각 초기값은 300px, 150px 입니다. CSS에 의해서 크기를 정할 수 있지만 렌더링하는 동안에 이미지 크기는 레이아웃 크기에 맞게 조정되기 때문에, 초기 캔버스의 비율을 고려하지 않을 경우 왜곡되어 나타나게 됩니다. 만약 렌더링이 왜곡된 것 처럼 보일 경우 CSS를 사용하지 않고 <canvas> 속성에서 width와 height를 지정해야 합니다.

canvas.width = 800;
canvas.height = 800;

 

 

 

 

 

※ 참고자료

1. MDN web docs : https://developer.mozilla.org/ko/docs/Web/API/Canvas_API