Canvas API

HTML5에 추가된, HTML <canvas> 요소는 JavaScript에서 스크립트를 통해 그래픽을 그리는 데 사용될 수 있습니다. 예를 들어, 그래프 그리기, 사진 합성, 애니메이션 제작, 심지어 실시간 비디오 처리나 렌더링에도 쓰일 수 있습니다.

Mozilla 응용프로그램은 Gecko 1.8 (즉 Firefox 1.5)를 시작으로 <canvas>에 대한 지원을 받았습니다. 요소는 원래 OS X Dashboard 및 Safari를 위해 Apple에서 처음 도입했습니다. Internet Explorer는 버전 9부터 <canvas>를 지원합니다; 이전 버전 IE용, 페이지는 Google Explorer Canvas 프로젝트로부터 스크립트를 포함하여 <canvas>에 대한 지원을 사실상 추가할 수 있습니다. Google Chrome 및 Opera 9도 <canvas>를 지원합니다.

<canvas> 요소는 웹 페이지 상 하드웨어 가속된 3D 그래픽을 그리기 위해 WebGL에 의해 사용될 수도 있습니다.

예

이는 그저 CanvasRenderingContext2D.fillRect() 메서드를 사용하는 간단한 코드 조각(snippet)입니다.

HTML

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

JavaScript

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

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

아래 코드를 편집해 canvas에서 바뀐 내용의 실시간 갱신을 지켜보세요:

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

참고

WebGLRenderingContext 관련 인터페이스는 WebGL 아래 참고서화됐습니다.

안내서 및 지도서

Canvas 지도서

<canvas> 기본 사용법 및 고급 기능을 다루는 종합 지도서.

코드 조각: Canvas

<canvas>를 포함하는 일부 확장 기능 개발자 지향 코드 조각.

데모: 기본 광선 투사기

cavas를 사용한 광선 추적(ray-tracing) 애니메이션 데모.

canvas에 DOM 객체 그리기

HTML 요소와 같은 DOM 콘텐츠를 canvas에 그리는 방법.

canvas 사용 비디오 조작

실시간으로 video 데이터를 조작하기 위해 <video> 및 <canvas> 조합.

리소스

일반

• HTML5 Canvas Deep Dive
• Canvas 안내서

라이브러리

• Fabric.js는 SVG 파싱 능력이 있는 오픈소스 Canvas 라이브러리입니다.
• Kinetic.js는 데스크톱 및 모바일 어플을 위한 상호 작용에 초점을 둔 오픈소스 Canvas 라이브러리입니다.
• Paper.js는 HTML5 Canvas 위에서 돌아가는 오픈소스 벡터 그래픽 scripting 프레임워크입니다.
• libCanvas는 강력하고 가벼운 canvas 프레임워크입니다.
• Processing.js는 Processing 시각화 언어의 포팅입니다.
• PlayCanvas는 오픈 소스 게임 엔진입니다.
• Pixi.js는 오픈 소스 게임 엔진입니다.
• PlotKit은 차트 및 그래프 라이브러리입니다.
• Rekapi는 Canvas용 애니메이션 keyframing API입니다.
• PhiloGL은 데이터 시각화, 창조 코딩 및 게임 개발용 WebGL 프레임워크입니다.
• JavaScript InfoVis Toolkit은 웹용 대화형 2D Canvas 데이터 시각화를 만듭니다.
• EaselJS는 게임 및 예술용으로 Canvas를 쓰기 쉽게 하는 무료/오픈 소스 라이브러리입니다

스펙

참조

• WebGL