---
title: Canvas API
slug: Web/HTML/Canvas
tags:
  - API
  - Canvas
  - JavaScript
  - 개요
  - 레퍼런스
translation_of: Web/API/Canvas_API
---
<div>{{CanvasSidebar}}</div>

<p><strong>Canvas API</strong>는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript">JavaScript</a>와 <a href="https://developer.mozilla.org/ko/docs/Web/HTML">HTML </a>{{HtmlElement("canvas")}} 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.</p>

<p>Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. <a href="https://developer.mozilla.org/ko/docs/Web/WebGL">WebGL API</a> 또한 <code>&lt;canvas&gt;</code> 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그립니다.</p>

<h2 id="기본_예시">기본 예시</h2>

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

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
</pre>

<h3 id="JavaScript">JavaScript</h3>

<p>{{domxref("Document.getElementById()")}} 메소드는 HTML <code>&lt;canvas&gt;</code> 엘리먼트에 대한 참조를 얻습니다. 그 다음, {{domxref("HTMLCanvasElement.getContext()")}} 메소드는 엘리먼트의 컨텍스트(렌더링될 그리기의 대상)를 얻습니다.</p>

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

<pre class="brush: js">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
</pre>

<h3 id="결과">결과</h3>

<p>{{ EmbedLiveSample('기본_예시', 700, 180) }}</p>

<h2 id="레퍼런스">레퍼런스</h2>

<div class="index">
<ul>
 <li>{{domxref("HTMLCanvasElement")}}</li>
 <li>{{domxref("CanvasRenderingContext2D")}}</li>
 <li>{{domxref("CanvasGradient")}}</li>
 <li>{{domxref("CanvasImageSource")}}</li>
 <li>{{domxref("CanvasPattern")}}</li>
 <li>{{domxref("ImageBitmap")}}</li>
 <li>{{domxref("ImageData")}}</li>
 <li>{{domxref("RenderingContext")}}</li>
 <li>{{domxref("TextMetrics")}}</li>
 <li>{{domxref("OffscreenCanvas")}} {{experimental_inline}}</li>
 <li>{{domxref("Path2D")}} {{experimental_inline}}</li>
 <li>{{domxref("ImageBitmapRenderingContext")}} {{experimental_inline}}</li>
</ul>
</div>

<div class="blockIndicator note">
<p><strong>노트:</strong> <code>WebGLRenderingContext</code>에 관련된 인터페이스는 <a href="/ko/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> 하위에 참조되어있습니다.</p>
</div>

<p>{{domxref("CanvasCaptureMediaStream")}}은 관련된 인터페이스입니다.</p>

<h2 id="가이드_및_튜토리얼">가이드 및 튜토리얼</h2>

<dl>
 <dt><a href="/ko/docs/Web/API/Canvas_API/Tutorial">Canvas 튜토리얼</a></dt>
 <dd>Canvas API의 기본적인 사용과 고급 기능 모두를 다루는 이해하기 쉬운 튜토리얼.</dd>
 <dt><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas 깊이 살펴보기</a></dt>
 <dd>Canvas API 및 WebGL의 실습, 자세한 소개.</dd>
 <dt><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas 핸드북</a></dt>
 <dd>Canvas API에 대한 유용한 레퍼런스.</dd>
 <dt><a href="/ko/docs/Web/API/Canvas_API/A_basic_ray-caster">데모: A basic ray-caster</a></dt>
 <dd>Canvas를 사용한 ray-tracing 애니메이션 데모.</dd>
 <dt><a href="/ko/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Canvas를 사용하여 비디오 조작</a></dt>
 <dd>{{HTMLElement("video")}}와 {{HTMLElement("canvas")}}를 조합하여 실시간으로 비디오 데이터를 조작.</dd>
</dl>

<h2 id="라이브러리">라이브러리</h2>

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

<ul>
 <li><a href="http://www.createjs.com/easeljs">EaselJS</a>는 게임, 생성 예술 및 기타 고도의 그래픽 경험을 쉽게 생성할 수 있게 해주는 오픈소스 캔버스 라이브러리입니다.</li>
 <li><a href="http://fabricjs.com">Fabric.js</a>는 SVG 파싱 기능을 갖춘 오픈소스 캔버스 라이브러리입니다.</li>
 <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a>는 캔버스 기반 데이터 열지도를 생성하기위한 오픈소스 라이브러리입니다.</li>
 <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a>은 인터렉티브한 데이터 시각화를 생성합니다.</li>
 <li><a href="https://konvajs.github.io/">Konva.js</a>는 데스크탑 및 모바일 애플리케이션을 위한 2D 캔버스 라이브러리입니다.</li>
 <li><a href="https://p5js.org/">p5.js</a>는 예술가, 디자이너, 교육자 및 입문자를 위한 캔버스 그리기 기능의 모든 세트를 포함하고 있습니다.</li>
 <li><a href="http://paperjs.org/">Paper.js</a>는 HTML5 Canvas 위에서 실행되는 오픈소스 벡터 그래픽 스크립팅 프레임워크입니다.</li>
 <li><a href="https://phaser.io/">Phaser</a>는 Canvas 및 WebGL 기반의 브라우저 게임을 위한 빠르고, 자유롭고, 재미있는 오픈소스 프레임워크입니다.</li>
 <li><a href="http://processingjs.org">Processing.js</a>는 Processing 시각화 언어의 포트입니다.</li>
 <li><a href="https://ptsjs.org">Pts.js</a>는 canvas 및 SVG를 사용한 창의적인 코딩 및 시각화를 위한 라이브러리입니다.</li>
 <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a>는 Canvas를 위한 애니메이션 키 프레임 API입니다.</li>
 <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a>는 2D 캔버스 엘리먼트를 생성하고 조작하기위한 오픈소스 JavaScript 라이브러리입니다.</li>
 <li><a href="http://zimjs.com">ZIM</a> 프레임워크는 canvas에서의 창의적인 코딩을 위한 편의성, 컴포넌트 및 컨트롤을 제공하는 프레임워크입니다. 접근성 및 다채로운 튜토리얼을 포함합니다.</li>
</ul>

<div class="blockIndicator note">
<p><strong>노트:</strong> WebGL을 사용하는 2D 및 3D를 위한 <a href="/ko/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL API</a>를 확인하세요.</p>
</div>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">코멘트</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<p>Mozilla 애플리케이션은 Gecko 1.8(<a href="/ko/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>)을 시작으로 <code>&lt;canvas&gt;</code>에 대한 지원을 받았습니다. OS X Dashboard 및 Safari를 위해 Apple이 소개한 것이 캔버스 엘리먼트의 기원입니다. Internet Explorer는 9버전부터 <code>&lt;canvas&gt;</code>를 지원하며, 이전 버전의 IE에서는 Google의 <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a> 프로젝트의 스크립트를 추가하여 <code>&lt;canvas&gt;</code>에 대한 지원을 효과적으로 추가할 수 있습니다. Google Chrome 및 Opera 9 또한 <code>&lt;canvas&gt;</code>를 지원합니다.</p>

<h2 id="함께_보기">함께 보기</h2>

<ul>
 <li><a href="/ko/docs/Web/WebGL">WebGL</a></li>
</ul>