..

Search

<canvas>

HTML <canvas> 태그

정의 및 특징

<canvas> 태그는 주로 자바스크립트와 같은 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용합니다.

 

<canvas> 요소는 그래픽 콘텐츠를 위한 컨테이너일 뿐 실제로 그림을 그리는 동작은 스크립트를 사용하여 구현합니다.

<canvas> 요소 내부에 존재하는 텍스트는 해당 브라우저가 <canvas> 요소를 지원하지 않을 경우 브라우저 화면에 대신 나타나게 됩니다.

예제 1
<canvas id="myCanvas" style="border: 2px solid black">
    이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>

코딩연습 ▶

 

예제 2
<canvas id="myCanvas" style="border: 2px solid black">
    이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.fillStyle = "yellow";
    context.fillRect(0,0,150,100);
</script>

코딩연습 ▶

지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera
<canvas> 1.0 지원함 9.0 1.5 2.0 9.0

HTML5에서 변경된 사항

<canvas> 태그는 HTML5에서 새롭게 추가된 요소입니다.

사용할 수 있는 속성

속성명   속성값 설명

height

  

픽셀

<canvas> 요소의 높이를 픽셀(pixel) 단위로 명시함.

width

 

픽셀

<canvas> 요소의 너비를 픽셀(pixel) 단위로 명시함.

CSS 기본값

canvas { 
  height: 150px;
  width: 300px;
}

DOM 인터페이스

typedef (CanvasRenderingContext2D or WebGLRenderingContext) RenderingContext;

interface HTMLCanvasElement : HTMLElement {
  attribute unsigned long width;
  attribute unsigned long height;

  RenderingContext? getContext(DOMString contextId, any... arguments);
  boolean probablySupportsContext(DOMString contextId, any... arguments);

  DOMString toDataURL(optional DOMString type, any... arguments);
  void toBlob(BlobCallback _callback, optional DOMString type, any... arguments);
};

callback BlobCallback = void (Blob? blob);

연관 페이지

HTML Canvas 수업 ⇒

연습문제