[javascript] Canvas 태그

목차

• Properties
• Method
  • captureStream()
  • getContext()
  • toBlob()
  • toDataURL()
  • transferControlToOffscreen()
• Events
  • contextlost
  • contextrestored
  • webglcontextcreationerror
  • webglcontextlost
  • webglcontextrestored

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

< HTMLCanvasElement Properties>

• height
• width

< HTMLCanvasElement Methode >

🟣 captureStream(frameRate)

float frameRate

• 각 프레임의 캡처 속도를 나타내는 배정밀도 부동 소수점 값
• 설정하지 않으면 캔버스가 변경될 때 마다 새 프레임이 캡처된다.
• 0으로 설정하면 프레임이 자동으로 캡처되지 않는다

htmlCanvasElement.captureStream(80); // 80 FPS

 

🟣 getContext(contextType, contextAttributes)

string contextType

• 2d
  • 2차원 렌더링 컨텍스트를 나타내는 CanvasRenderingContext2D 객체 생성
• webgl 또는 experimental-webgl
  • 3차원 렌더링 컨텍스트를 나타내는 WebGLRenderingContext 객체를 반환한다.
• webgl2
  • 3차원 렌더링 컨텍스트를 나타내는WebGL2RenderingContext 객체를 생성한다.
• bitmaprenderer
  • <​canvas> 요소의 콘텐츠를 주어진 ImageBitmap으로 대체하기 위한 기능만을 제공하는 ImageBitmapRenderingContext 객체를 반환한다. 
• webgpu
  • WebGPU API를 사용할 수 있는 3차원 렌더링 컨텍스트를 나타내는 GPUCanvasContext 객체를 생성한다.

 

Object contextAttributes

 

2D 컨텍스트 속성

• alpha
  • <canva>  요소가 알파 채널을 포함하는 지를 나타내는 불리언(boolean) 값이다. 
  • false로 설정할 경우 배경이 항상 투명하다는 것으로 간주 하기에 투명 컨텐츠나 이미지를 그리는 데 속도를 높일 수 있다.
• colorSpace
  • 렌더링 컨텍스트의 색상 공간을 지정합니다. 가능한 값은 다음과 같습니다.
    1. "srgb" : 기본값이며 sRGB 색 공간을 지정한다.
    2. "display-p3" : display-p3 색 공간을 선택한다.
• desynchronized
  • 이벤트 루프에서 캔버스 페인트 주기를 비동기화하여 대기 시간을 줄이도록 유저 에이전트에게 힌트를 줄 수 있다.
  • 값의 유형은 불리언(boolean)이다.
• willReadFrequently
  
  • 잦은 읽기 작업이 계획되어 있는지 여부를 나타내는 불리언(boolean) 값이다. 
  • 지정하면 하드웨어 가속 대신에 소프트웨어 2D 캔버스를 사용하게 되며 getImageData()를 자주 호출할 때 메모리를 절약할 수 있다.
• webgpu
  • WebGPU API를 사용할 수 있는 3차원 렌더링 컨텍스트를 나타내는 GPUCanvasContext 객체를 생성한다.

WebGL 컨텍스트 속성:

• alpha
  • 캔버스에 알파 버퍼가 포함되어 있는지 여부를 나타내는 불리언(boolean) 값이다.
• antialias
  • 안티 앨리아싱을 수행할지 여부를 나타내는 불리언(boolean) 값이다.
• depth
  • 드로잉 버퍼가 최소 16비트 깊이의 버퍼를 가질 것인지 여부를 나타내는 불리언(boolean) 값이다.
• stencil
  
  • 드로잉 버퍼가 최소 8비트의 스텐실 버퍼를 갖는지 여부를 나타내는 불리언(boolean) 값이다.
• desynchronized
  • 이벤트 루프에서 캔버스 페인트 주기를 비동기화하여 대기 시간을 줄이도록 유저 에이전트에게 힌트를 주는 불리언(boolean) 값이다.

• failIfMajorPerformanceCaveat
  • 시스템 성능이 낮을 경우 컨텍스트를 생성할지 여부를 나타내는 불리언(boolean) 값이다.
• powerPreference
  • WebGL 컨텍스트에 대한 적합한 GPU 구성이 무엇인지를 나타내는 유저 에이전트에 대한 힌트이다.
  • 가능한 문자열 값은 다음과 같다.
    1.  'default' : 유저 에이전트가 가장 적합한 GPU 구성을 결정하도록 한다. 기본값이다.
    2.  'high-performance' : 전력 소비보다 렌더링 성능을 우선시 한다.
    3.  'lower-power' : 렌더링 성능보다는 전력 절약을 우선시 한다.
• premultipliedAlpha
  • 페이지 컴포지터가 미리 곱해진 알파를 갖는 색상을 포함하는 드로잉 버퍼를 가정할 것인지 여부를 나타내는 불리언(boolean) 값이다.
• preserveDrawingBuffer
  
  • true일 경우에 버퍼는 제거되지 않으며 명시적으로 값을 제거하거나 덮어 쓰여지기 전까지는 유지된다.
• xrCompatible
  • 몰입형 XR 장치에 호환되는 그래픽 어댑터를 사용하도록 유저 에이전트에게 힌트를 주는 불리언(boolean) 값이다.

const gl = canvas.getContext("webgl", {
  antialias: false,
  depth: false,
});

 

 

 

---

참고 URL

https://devdic.com/javascript/reference/dom/interface:925/HTMLCanvasElement

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement