Canvas API

canvas에 초록색 사각형을 그리는 간단한 예시입니다.

Document.getElementById() 메소드는 HTML <canvas> 엘리먼트에 대한 참조를 얻습니다. 그 다음, HTMLCanvasElement.getContext() 메소드는 엘리먼트의 컨텍스트(렌더링될 그리기의 대상)를 얻습니다.

실제 그리기는 CanvasRenderingContext2D (en-US) 인터페이스를 사용해 수행됩니다. fillStyle (en-US) 프로퍼티는 사각형을 초록색으로 만듭니다. fillRect() (en-US) 메소드는 좌측 상단 코너를 (10, 10) 위치에 놓으며, 너비를 150, 높이를 100으로 지정합니다.

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

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

• HTMLCanvasElement
• CanvasRenderingContext2D (en-US)
• CanvasGradient (en-US)
• CanvasImageSource (en-US)
• CanvasPattern (en-US)
• ImageBitmap (en-US)
• ImageData
• RenderingContext
• TextMetrics (en-US)
• OffscreenCanvas Experimental
• Path2D (en-US) Experimental
• ImageBitmapRenderingContext (en-US) Experimental

CanvasCaptureMediaStream (en-US)은 관련된 인터페이스입니다.

Canvas 튜토리얼

Canvas API의 기본적인 사용과 고급 기능 모두를 다루는 이해하기 쉬운 튜토리얼.

HTML5 Canvas 깊이 살펴보기

Canvas API 및 WebGL의 실습, 자세한 소개.

Canvas 핸드북

Canvas API에 대한 유용한 레퍼런스.

데모: A basic ray-caster

Canvas를 사용한 ray-tracing 애니메이션 데모.

Canvas를 사용하여 비디오 조작

<video>와 <canvas>를 조합하여 실시간으로 비디오 데이터를 조작.

Canvas API는 굉장히 강력하지만, 사용하는 것이 항상 간단하지 않습니다. 아래에 나열된 라이브러리들은 캔버스 기반 프로젝트를 더 빠르고 더 쉽게 생성할 수 있게 해줍니다.

• EaselJS는 게임, 생성 예술 및 기타 고도의 그래픽 경험을 쉽게 생성할 수 있게 해주는 오픈소스 캔버스 라이브러리입니다.
• Fabric.js는 SVG 파싱 기능을 갖춘 오픈소스 캔버스 라이브러리입니다.
• heatmap.js는 캔버스 기반 데이터 열지도를 생성하기위한 오픈소스 라이브러리입니다.
• JavaScript InfoVis Toolkit은 인터렉티브한 데이터 시각화를 생성합니다.
• Konva.js는 데스크탑 및 모바일 애플리케이션을 위한 2D 캔버스 라이브러리입니다.
• p5.js는 예술가, 디자이너, 교육자 및 입문자를 위한 캔버스 그리기 기능의 모든 세트를 포함하고 있습니다.
• Paper.js는 HTML5 Canvas 위에서 실행되는 오픈소스 벡터 그래픽 스크립팅 프레임워크입니다.
• Phaser는 Canvas 및 WebGL 기반의 브라우저 게임을 위한 빠르고, 자유롭고, 재미있는 오픈소스 프레임워크입니다.
• Processing.js는 Processing 시각화 언어의 포트입니다.
• Pts.js는 canvas 및 SVG를 사용한 창의적인 코딩 및 시각화를 위한 라이브러리입니다.
• Rekapi는 Canvas를 위한 애니메이션 키 프레임 API입니다.
• Scrawl-canvas는 2D 캔버스 엘리먼트를 생성하고 조작하기위한 오픈소스 JavaScript 라이브러리입니다.
• ZIM 프레임워크는 canvas에서의 창의적인 코딩을 위한 편의성, 컴포넌트 및 컨트롤을 제공하는 프레임워크입니다. 접근성 및 다채로운 튜토리얼을 포함합니다.

Mozilla 애플리케이션은 Gecko 1.8(Firefox 1.5 (en-US))을 시작으로 <canvas>에 대한 지원을 받았습니다. OS X Dashboard 및 Safari를 위해 Apple이 소개한 것이 캔버스 엘리먼트의 기원입니다. Internet Explorer는 9버전부터 <canvas>를 지원하며, 이전 버전의 IE에서는 Google의 Explorer Canvas 프로젝트의 스크립트를 추가하여 <canvas>에 대한 지원을 효과적으로 추가할 수 있습니다. Google Chrome 및 Opera 9 또한 <canvas>를 지원합니다.

• WebGL