WEBAPI

WEBAPI

Draft
  • account_tree
  • bug_report

Canvas

하위 트리 탐색

  • CanvasGradient

    그라디언트를 설명하는 불투명 객체를 나타내는 인터페이스이다.
    • Constructor

      별도의 생성자 함수는 없으며 CanvasRenderingContext2D.prototype.createLinearGradient(), CanvasRenderingContext2D.prototype.createConicGradient(), CanvasRenderingContext2D.prototype.createRadialGradient() 메소드에 의해서 반환된다.
    • [[Prototype]]

      생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
      • Methods

        • addColorStop()

          오프셋과 색상으로 정의된 새 정지점을 그라디언트에 추가한다.
  • CanvasPattern

    패턴을 다루는 불투명 객체를 나타낸다.
    • Constructor

      별도의 생성자 함수는 없으며 CanvasRenderingContext2D.prototype.createPattern() 메소드에 의해서 반환된다.
    • [[Prototype]]

      생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
      • Methods

        • setTransform()

          패턴에 선형 변환을 나타내는 SVGMatrix 또는 DOMMatrix 적용한다.
  • CanvasRenderingContext2D

    <canvas> 요소의 드로잉 표면에 2D 렌더링 컨텍스트를 제공한다. 도형, 텍스트, 이미지 및 기타 객체를 그리는데 사용된다.
    • Constructor

      생성자 함수는 지원하지 않으며 HTMLCanvasElement 인터페이스의 getContext() 메소드에 의해서 반환된다.
    • [[Prototype]]

      생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
      • Methods

        • arc()

          현재 패스에 호를 그린다.
        • arcTo()

          현재 위치에서 주어진 제어점과 반지름을 사용하여 호를 추가한다.
        • beginPath()

          새로운 패스를 시작한다.
        • bezierCurveTo()

          현재 패스에서 3차 베지어 곡선을 추가한다.
        • clearRect()

          시작점(x, y) 및 크기(width, height)로 정의된 사각형 영역의 모든 픽셀들을 제거한다.
        • clip()

          현재 패스에서 클리핑 경로를 만든다.
        • closePath()

          열린 패스를 시점 지점과 연결하여 닫는다.
        • createImageData()

          지정된 치수를 갖는 새로운 ImageData 객체를 생성한다.
        • createLinearGradient()

          매개변수로 지정된 좌표에 지정된 선을 따라 선형 그라데이션을 만든다.
        • createPattern()

          지정된 이미지를 사용하여 패턴을 만든다.
        • createRadialGradient()

          매개 변수에 지정된 두 원의 좌표로 지정된 방사형 그라데이션을 만든다.
        • drawFocusIfNeeded()

          현재 요소에 포커스가 있다면 패스 주위에 포커스 표시를 한다.
        • drawImage()

          캔버스에 이미지를 그리는 다양한 방법을 제공한다.
        • ellipse()

          현재 패스에 타원을 추가한다.
        • fill()

          현재 패스로 생성된 면에 지정된 스타일로 채운다.
        • fillRect()

          width와 height에 따라 크기가 결정되는 x, y에 위치에 채워진 사각형을 그린다.
        • fillText()

          캔버스에 텍스트를 추가한다.
        • getContextAttributes()

          실제 컨텍스트 속성을 포함하는 객체를 반환한다.
        • getImageData()

          지정된 좌표와 폭과 높이를 갖는 사각형으로 표시된 캔버스 영역에 대한 기본 픽셀 데이터를 나타내는 ImageData 객체를 반환한다.
        • getLineDash()

          대시라인(dash line)의 패턴 배열을 반환한다.
        • getTransform()

          컨텍스트에 적용 중인 현재 변환 행렬을 검색한다.
        • isPointInPath()

          지정된 포인트가 현재 패스에 포함되어 있는지 여부를 확인한다.
        • isPointInStroke()

        • lineTo()

          현재 위치에서 매개 변수로 지정된 좌표로 직선으로 연결한다.
        • measureText()

          TextMetrics 객체를 반환한다.
        • moveTo()

          매개 변수로 지정된 좌표로 이동한다.
        • putImageData()

          지정된 ImageData 객체의 데이터를 비트맵에 그린다.
        • quadraticCurveTo()

          현재 패스에 2차 베지어 곡선을 추가한다.
        • rect()

          매개 변수로 지정된 위치와 가로, 세로 크기를 사용하여 사각형 패스를 만든다.
        • resetTransform()

          단위 행렬로 현재 변환을 재설정한다.
        • restore()

          save()로 저장된 상태 스택의 마지막 요소를 사용하여 복원한다.
        • rotate()

          변환 행렬에 회전을 추가한다.
        • save()

          현재 그리기 스타일 상태를 저장한다.
        • scale()

          가로, 세로 값을 지정하여 〈canvas〉 요소의 단위에 크기 조정 변환을 추가한다.
        • scrollPathIntoView()

          현재 패스 또는 주어진 패스를 뷰로 스크롤한다.
        • setLineDash()

          대시 라인을 주어진 패턴으로 설정한다.
        • setTransform()

          현재 변환을 단위 행렬로 재설정한 다음 동일한 인수로 transform() 메소드를 호출한다.
        • stroke()

          선을 지정된 스타일로 적용한다.
        • strokeRect()

          현재 획 스타일을 사용하여 x, y 값을 갖는 시작점에서 width, height 값을 갖는 사각형을 캔버스에 그린다.
        • strokeText()

          x, y로 주어진 위치에 텍스트를 그린다.
        • transform()

          현재 변환 행렬에 인수로 설정된 행렬을 곱한다.
        • translate()

          캔버스와 캔버스의 원점을 그리드에서 x, y로 이동하여 변환을 추가한다.
      • Properties

        • canvas

          연결된 HTMLCanvasElement 객체를 참조한다.
        • currentTransform

          현재 변환 행렬(DOMMatrix 객체)을 나타낸다.
        • direction

          텍스트의 방향을 설정한다.
        • fillStyle

          면에 적용할 색 또는 스타일을 지정한다.
        • filter

          캔버스에 CSS 또는 SVG 필터를 적용한다.
        • font

          글꼴 및 크기를 설정한다.
        • globalAlpha

          캔버스에 합성되기 전에 쉐입(shape)과 이미지에 적용되는 투명도 값을 나타낸다.
        • globalCompositeOperation

        • imageSmoothingEnabled

          크기가 조정된 이미지를 매끄럽게 처리하기 위해 활성 여부를 설정한다.
        • imageSmoothingQuality

          이미지의 매끄러운 품질을 설정한다.
        • lineCap

          선 끝의 유형을 설정하거나 조회한다.
        • lineDashOffset

          대시 라인에서 패턴을 시작할 위치를 지정한다.
        • lineJoin

          선이 꺽이는 경우 모서리의 모양을 설정하거나 조회한다.
        • lineWidth

          선의 굵기를 설정하거나 조회한다.
        • miterLimit

          연귀한계 비율을 나타낸다.
        • shadowBlur

          그림자에 흐림 효과를 위한 값을 지정한다.
        • shadowColor

          그림자의 색상을 지정한다.
        • shadowOffsetX

          그림자의 수평 위치를 나타낸다.
        • shadowOffsetY

          그림자의 수직 위치를 나타낸다.
        • strokeStyle

          선에 적용할 색 또는 스타일을 지정한다.
        • textAlign

          텍스트가 렌더링되는 좌표 기준으로 정렬을 설정한다.
        • textBaseline

          텍스트 기준선에 대한 정렬을 설정한다.
  • ImageBitmap

    과도한 지연없이 <canvas>에 그릴 수 있는 비트맵 이미지를 다루는 인터페이스이다.
    • Constructor

      ImageBitmap 객체는 전역 스코프의 createImageBitmap() 생성 메소드를 사용하여 반환받는다.
    • [[Prototype]]

      생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
      • Methods

        • close()

          ImageBitmap 객체와 연결된 모든 그래픽 리소스를 제거한다.
      • Properties

        • height

          ImageData 객체의 높이를 CSS 픽셀 단위로 나타낸다.
        • width

          ImageData 객체의 폭을 CSS 픽셀 단위로 나타낸다.
  • ImageBitmapRenderingContext

    캔버스의 콘텐츠를 주어진 ImageBitmap 객체로 바꾸는 기능을 제공하는 인터페이스이다.
    • Constructor

      생성자 함수는 없으며 HTMLCanvasElement.prototype.getContext() 또는 OffscreenCanvas.prototype.getContext() 메소드에서 반환된다.
    • [[Prototype]]

      생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
      • Methods

        • transferFromImageBitmap()

          현재 렌더링 컨텍스트와 연결된 캔버스에 지정된 ImageBitmap 객체를 참조한다.
  • ImageData

    <canvas> 요소 영역의 기본 픽셀 데이터를 다루는 인터페이스이다.
    • Constructor

      생성자 함수가 있으며 CanvasRenderingContext2D.prototype.createImageData() 또는 CanvasRenderingContext2D.prototype.getImageData() 메소드를 사용하여 반환받을 수 있다.
    • [[Prototype]]

      생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
      • Properties

        • data

          0에서 255(포함) 사이의 정수 값을 사용하여 RGBA 순서의 데이터를 포함하는 1차원 배열을 나타낸다.
        • height

          실제 픽셀 단위의 높이를 나타낸다.
        • width

          실제 픽셀 단위의 너비를 나타낸다.
  • OffscreenCanvasRenderingContext2D

    화면 밖의 <canvas> 요소의 드로잉 표면에 2D 렌더링 컨텍스트를 제공한다. 도형, 텍스트, 이미지 및 기타 객체를 그리는데 사용된다.
    • Constructor

      생성자 함수는 없으며 OffscreenCanvas.prototype.getContext() 메소드에 의해서 반환된다.
    • [[Prototype]]

      생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
      • Methods

        • arc()

          현재 패스에 호를 그린다.
        • arcTo()

          현재 위치에서 주어진 제어점과 반지름을 사용하여 호를 추가한다.
        • beginPath()

          새로운 패스를 시작한다.
        • bezierCurveTo()

          현재 패스에서 3차 베지어 곡선을 추가한다.
        • clearRect()

          시작점(x, y) 및 크기(width, height)로 정의된 사각형 영역의 모든 픽셀들을 제거한다.
        • clip()

          현재 패스에서 클리핑 경로를 만든다.
        • closePath()

          열린 패스를 시점 지점과 연결하여 닫는다.
        • commit()

        • createImageData()

          지정된 치수를 갖는 새로운 ImageData 객체를 생성한다.
        • createLinearGradient()

          매개변수로 지정된 좌표에 지정된 선을 따라 선형 그라데이션을 만든다.
        • createPattern()

          지정된 이미지를 사용하여 패턴을 만든다.
        • createRadialGradient()

          매개 변수에 지정된 두 원의 좌표로 지정된 방사형 그라데이션을 만든다.
        • drawImage()

          캔버스에 이미지를 그리는 다양한 방법을 제공한다.
        • ellipse()

          현재 패스에 타원을 추가한다.
        • fill()

          현재 패스로 생성된 면에 지정된 스타일로 채운다.
        • fillRect()

          width와 height에 따라 크기가 결정되는 x, y에 위치에 채워진 사각형을 그린다.
        • fillText()

          캔버스에 텍스트를 추가한다.
        • getImageData()

          지정된 좌표와 폭과 높이를 갖는 사각형으로 표시된 캔버스 영역에 대한 기본 픽셀 데이터를 나타내는 ImageData 객체를 반환한다.
        • getLineDash()

        • getTransform()

          컨텍스트에 적용 중인 현재 변환 행렬을 검색한다.
        • isPointInPath()

          지정된 포인트가 현재 패스에 포함되어 있는지 여부를 확인한다.
        • isPointInStroke()

        • lineTo()

          현재 위치에서 매개 변수로 지정된 좌표로 직선으로 연결한다.
        • measureText()

          TextMetrics 객체를 반환한다.
        • moveTo()

          매개 변수로 지정된 좌표로 이동한다.
        • putImageData()

          지정된 ImageData 객체의 데이터를 비트맵에 그린다.
        • quadraticCurveTo()

          현재 패스에 2차 베지어 곡선을 추가한다.
        • rect()

          매개 변수로 지정된 위치와 가로, 세로 크기를 사용하여 사각형 패스를 만든다.
        • resetTransform()

          단위 행렬로 현재 변환을 재설정한다.
        • restore()

          save()로 저장된 상태 스택의 마지막 요소를 사용하여 복원한다.
        • save()

          현재 그리기 스타일 상태를 저장한다.
        • scale()

          가로, 세로 값을 지정하여 〈canvas〉 요소의 단위에 크기 조정 변환을 추가한다.
        • setLineDash()

          대시 라인을 주어진 패턴으로 설정한다.
        • setTransform()

          현재 변환을 단위 행렬로 재설정한 다음 동일한 인수로 transform() 메소드를 호출한다.
        • stroke()

          선을 지정된 스타일로 적용한다.
        • strokeRect()

          현재 획 스타일을 사용하여 x, y 값을 갖는 시작점에서 width, height 값을 갖는 사각형을 캔버스에 그린다.
        • strokeText()

          x, y로 주어진 위치에 텍스트를 그린다.
        • transform()

          현재 변환 행렬에 인수로 설정된 행렬을 곱한다.
        • translate()

          캔버스와 캔버스의 원점을 그리드에서 x, y로 이동하여 변환을 추가한다.
      • Properties

        • canvas

          OffscreenCanvas 객체를 참조한다.
        • direction

          텍스트의 방향을 설정한다.
        • fillStyle

          면에 적용할 색 또는 스타일을 지정한다.
        • filter

          캔버스에 CSS 또는 SVG 필터를 적용한다.
        • font

          글꼴 및 크기를 설정한다.
        • globalAlpha

          캔버스에 합성되기 전에 쉐입(shape)과 이미지에 적용되는 투명도 값을 나타낸다.
        • globalCompositeOperation

        • imageSmoothingEnabled

          크기가 조정된 이미지를 매끄럽게 처리하기 위해 활성 여부를 설정한다.
        • imageSmoothingQuality

          이미지의 매끄러운 품질을 설정한다.
        • lineCap

          선 끝의 유형을 설정하거나 조회한다.
        • lineDashOffset

          대시 라인에서 패턴을 시작할 위치를 지정한다.
        • lineJoin

          선이 꺽이는 경우 모서리의 모양을 설정하거나 조회한다.
        • lineWidth

          선의 굵기를 설정하거나 조회한다.
        • miterLimit

          연귀한계 비율을 나타낸다.
        • shadowBlur

          그림자에 흐림 효과를 위한 값을 지정한다.
        • shadowColor

          그림자의 색상을 지정한다.
        • shadowOffsetX

          그림자의 수평 위치를 나타낸다.
        • shadowOffsetY

          그림자의 수직 위치를 나타낸다.
        • strokeStyle

          선에 적용할 색 또는 스타일을 지정한다.
        • textAlign

          텍스트가 렌더링되는 좌표 기준으로 정렬을 설정한다.
        • textBaseline

          텍스트 기준선에 대한 정렬을 설정한다.
  • Path2D

    • Constructor

      Path2D() 생성자 함수를 이용하여 새로운 Path2D 객체를 생성할 수 있다.
      • Path2D()

        새로운 Path2D 객체를 생성한다.
    • [[Prototype]]

      생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
      • Methods

        • addPath()

          현재 패스에 새로운 패스를 추가한다.
        • arc()

          현재 패스에 호를 그린다.
        • arcTo()

          현재 위치에서 주어진 제어점과 반지름을 사용하여 호를 추가한다.
        • bezierCurveTo()

          현재 패스에서 3차 베지어 곡선을 추가한다.
        • closePath()

          열린 패스를 시점 지점과 연결하여 닫는다.
        • ellipse()

          현재 패스에 타원을 추가한다.
        • lineTo()

          현재 위치에서 매개 변수로 지정된 좌표로 직선으로 연결한다.
        • moveTo()

          매개 변수로 지정된 좌표로 이동한다.
        • quadraticCurveTo()

          현재 패스에 2차 베지어 곡선을 추가한다.
        • rect()

          매개 변수로 지정된 위치와 가로, 세로 크기를 사용하여 사각형 패스를 만든다.
  • TextMetrics

    캔버스 내의 텍스트 크기를 다루는 인터페이스이다.
    • Constructor

      생성자 함수는 존재하지 않으며 CanvasRenderingContext2D.prototype.measureText() 메소드로 반환받는다.
    • [[Prototype]]

      생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
      • Properties

        • actualBoundingBoxAscent

          CanvasRenderingContext2D.prototype.textBaseline 속성으로 표시되는 수평선에서 텍스트를 렌더링하는 데 사용되는 경계 사각형의 상단까지의 거리를 나타낸다.
        • actualBoundingBoxDecent

          CanvasRenderingContext2D.prototype.textBaseline 속성으로 표시되는 수평선에서 텍스트를 렌더링하는 데 사용되는 경계 사각형의 맨 아래까지의 거리를 나타낸다.
        • actualBoundingBoxLeft

          CanvasRenderingContext2D.prototype.textAlign 속성에 의해 주어진 정렬 지점에서 텍스트 경계 사각형의 왼쪽까지의 거리를 CSS 픽셀로 조회한다.
        • actualBoundingBoxRight

          CanvasRenderingContext2D.prototype.textAlign 속성에 의해 주어진 정렬 지점에서 텍스트 경계 사각형의 오른쪽까지의 거리를 CSS 픽셀로 조회한다.
        • alphabeticBaseline

          CanvasRenderingContext2D.prototype.textBaseline 속성으로 표시되는 수평선에서 선 상자의 알파벳 기준선까지의 거리를 나타낸다.
        • emHeightAscent

          CanvasRenderingContext2D.prototype.textBaseline 속성으로 표시되는 수평선에서 선 상자의 em 사각형 상단까지의 거리를 나타낸다.
        • emHeightDescent

          CanvasRenderingContext2D.prototype.textBaseline 속성으로 표시되는 수평선에서 선 상자의 em 사각형 맨 아래까지의 거리를 나타낸다.
        • fontBoundingBoxAscent

          CanvasRenderingContext2D.prototype.textBaseline 속성으로 표시되는 수평선에서 텍스트를 렌더링하는 데 사용되는 모든 글꼴의 가장 높은 경계 사각형의 상단까지의 거리를 나타낸다.
        • fontBoundingBoxDecent

          CanvasRenderingContext2D.prototype.textBaseline 속성으로 표시되는 수평선에서 텍스트를 렌더링하는 데 사용되는 모든 글꼴의 가장 높은 경계 사각형 하단까지의 거리를 나타낸다.
        • hangingBaseline

          CanvasRenderingContext2D.prototype.textBaseline 속성으로 표시되는 수평선에서 선 상자의 매달린 기준선까지의 거리를 나타낸다.
        • ideographicBaseline

          CanvasRenderingContext2D.prototype.textBaseline 속성으로 표시되는 수평선에서 선 상자의 표의 문자 기준선까지의 거리를 나타낸다.
        • width

          인라인 텍스트 세그먼트의 계산된 너비를 CSS 픽셀로 나타낸다.

지원 웹브라우저