Canvas API

기본 예시

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

HTML

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

JavaScript

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

실제 그리기는 CanvasRenderingContext2D 인터페이스를 사용해 수행됩니다. fillStyle 프로퍼티는 사각형을 초록색으로 만듭니다. fillRect() 메소드는 좌측 상단 코너를 (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
• CanvasGradient
• CanvasImageSource
• CanvasPattern
• ImageBitmap
• ImageData
• RenderingContext
• TextMetrics
• OffscreenCanvas
• Path2D
• ImageBitmapRenderingContext

CanvasCaptureMediaStream은 관련된 인터페이스입니다.

가이드 및 튜토리얼

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

함께 보기

• WebGL