canvas API

HTML 요소로서, 스크립트(보통은JavaScript)를 사용하여 그림을 그리는 데에 사용된다.

예를 들면,

그래프를 그리거나 사진을 합성하거나,

간단한(혹은복잡할 수도 있는) 애니메이션을 만드는 데에 사용될 수 있다.

몇몇 오래된 브라우저는 <canvas>요소를 지원하지 않지만, 최근 버전의 주요 브라우저들은 모두 지원하고 있다.

캔버스의 크기는 300px * 150px (너비 * 높이)가 초기 설정값이며,

CSS height와 width 속성을 사용하여 바꿀 수 있다. 캔버스에 그림을 그리려면 자바스크립트 컨텍스트 오브젝트를 사용한다.

Element

src 및 alt 속성이 없다는 점만 제외하면 <img> 요소처럼 보인다.
실제로 canvas 요소에는 width와 height의 두 속성만 있다.
이것들은 모두 선택사항이며 DOM 프로퍼티를 사용하여 설정할 수도 있다.

rendering context

캔버스는 처음에 비어있다.
무언가를 표시하기 위해서, 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록 할 필요가 있다.

getContext()
<canvas> 요소는 getContext() 메서드를 이용해서, 랜더링 컨텍스트와 (렌더링 컨텍스트의) 그리기 함수들을 사용할 수 있다. getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 파라미터를 가진다.
2D 그래픽의 경우, CanvasRenderingContext2D을 얻기위해 "2d"로 지정한다.

  var canvas = document.getElementById('tutorial');
  if(!canvas.getContext) {
      //getContext()가 존재하지 않으면, canvas를 지원하지 않는 브라우저입니다
  }
  var ctx = canvas.getContext('2d');

예시 코드

  

                                                 
                

                
                
                
  
  
 
                

                
                











                
                
 
   
 
                




                
                




                


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 50, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 50, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

위 스크립트에 draw() 함수 문서가 호출되었는데,
이는 문서가 load 이벤트를 수신하여 페이지 로딩이 완료될 때 한번 실행된다.
이 함수나 이와 유사한 함수는, 페이지가 처음 로딩되는 한,
window.setTimeout(), window.setInterval(), 혹은 또 다른 이벤트 핸들러 등을 이용하여 호출될 수 있다.