ELEMENTS

Editing
  • account_tree
  • bug_report

<canvas>

Canvas API 또는 WebGL API를 사용해서 그래픽 처리와 애니메이션 등 시각적 이미지를 즉시 렌더링하는 데 사용한다.

  • 콘텐츠 분류

  • 허용된 부모 요소 또는 위치

    EMBEDDED CONTENT

    임베디드 콘텐츠(embedded-content)가 예상되는 위치

  • 콘텐츠 모델

  • 태그 생략

    시작 태그, 종료 태그 모두 작성

  • DOM Interface

    HTMLCanvasElement

    typedef (CanvasRenderingContext2D or ImageBitmapRenderingContext or WebGLRenderingContext or WebGL2RenderingContext or GPUCanvasContext) RenderingContext;
    
    [Exposed=Window]
    interface HTMLCanvasElement : HTMLElement {
      [HTMLConstructor] constructor();
    
      [CEReactions] attribute unsigned long width;
      [CEReactions] attribute unsigned long height;
    
      RenderingContext? getContext(DOMString contextId, optional any options = null);
    
      USVString toDataURL(optional DOMString type = "image/png", optional any quality);
      undefined toBlob(BlobCallback _callback, optional DOMString type = "image/png", optional any quality);
      OffscreenCanvas transferControlToOffscreen();
    };
    
    callback BlobCallback = undefined (Blob? blob);

구문

마크업 형식
<canvas></canvas>
Example

애트리뷰트

width dimension attribute

요소의 시각적 가로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.

height dimension attribute

요소의 시각적 세로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.

글로벌 애트리뷰트

일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.

글로벌 이벤트 핸들러

일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.

버전 명세

HTML Standard
#the-canvas-element

지원 웹브라우저