OffscreenCanvas

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

실험적: 이 기능은 실험적인 기능입니다.
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

OffscreenCanvas 는 화면 밖에서 렌더링되는 캔버스 인터페이스입니다. window 객체와 worker 객체 모두 지원합니다.

생성자

OffscreenCanvas()

OffscreenCanvas 생성자. 새 OffscreenCanvas 객체를 생성합니다.

프로퍼티

OffscreenCanvas.height

캔버스의 높이

OffscreenCanvas.width

캔버스의 너비

메소드

OffscreenCanvas.getContext()

렌더링된 캔버스 컨텍스트 객체를 반환합니다.

OffscreenCanvas.convertToBlob()

캔버스에 들어있는 이미지에 대한 Blob 객체를 생성합니다.

OffscreenCanvas.transferToImageBitmap()

OffscreenCanvas에 렌더링된 이미지중에서 가장 최근에 렌더링된 이미지를 ImageBitmap 객체로 생성합니다.

예시

OffscreenCanvas 에서 만들어진 프레임을 동기적으로 화면에 보여주는 방법

OffscreenCanvas API를 사용하는 방법은 OffscreenCanvas에 속한 RenderingContext를 이용해 새로운 프레임 객체를 생성하는 것입니다. 새 프레임이 컨텍스트에 렌더링이 되고나면, 가장 최근에 렌더링 된 이미지를 저장하는 transferToImageBitmap() 메소드를 호출할 수 있습니다. 이 메소드는 다른 수 많은 Web API에서 사용되고 있는 ImageBitmap 객체를 리턴합니다.

ImageBitmap을 화면에 표시하려면, 현재 (화면에 보여지고 있는) 캔버스 요소의 canvas.getContext("bitmaprenderer") 메소드를 호출했을 때 생성되는 ImageBitmapRenderingContext 객체를 사용하면 됩니다. 이 컨텍스트는 캔버스의 내용을 주어진 ImageBitmap으로 전환하는 기능을 제공합니다. OffscreenCanvas에서 이전에 렌더링이 되어서 등록된 ImageBitmap을 이용한 ImageBitmapRenderingContext.transferFromImageBitmap()을 호출하면 ImageBitmap이 캔버스에 표시되고 소유권 역시 캔버스로 넘어갑니다. 단일 OffscreenCanvas는 프레임들을 임의의 다른 ImageBitmapRenderingContext 객체로 전달합니다.

아래에 두 개의 <canvas> 요소가 있습니다.

html
<canvas id="one"></canvas> <canvas id="two"></canvas>

다음의 코드는 위에서 설명한 것처럼 OffscreenCanvas를 이용해 렌더링합니다.

js
var one = document.getElementById("one").getContext("bitmaprenderer");
var two = document.getElementById("two").getContext("bitmaprenderer");

var offscreen = new OffscreenCanvas(256, 256);
var gl = offscreen.getContext("webgl");

// ... gl 컨텍스트를 이용해 첫 번째 캔버스에 무언가를 그립니다 ...

// 첫 번째 캔버스에 렌더링을 수행합니다.
var bitmapOne = offscreen.transferToImageBitmap();
one.transferFromImageBitmap(bitmapOne);

// ... gl 컨텍스트를 이용해 두 번째 캔버스에 무언가를 그립니다 ...

// 두 번째 캔버스에 렌더링을 수행합니다.
var bitmapTwo = offscreen.transferToImageBitmap();
two.transferFromImageBitmap(bitmapTwo);

OffscreenCanvas 에서 만들어진 프레임을 비동기적으로 화면에 보여주는 방법

OffscreenCanvas API를 이용하는 또 다른 방법은 worker 또는 메인 스레드위에서 <canvas> 요소의 transferControlToOffscreen()를 호출하는 것입니다. 여기서 메인 스레드는 OffscreenCanvas 객체를 반환하는 HTMLCanvasElement 객체를 가지고 있습니다. getContext()를 호출하면 OffscreenCanvas에서 RenderingContext를 얻을 수 있습니다.

main.js (메인 스레드 코드):

js
var htmlCanvas = document.getElementById("canvas");
var offscreen = htmlCanvas.transferControlToOffscreen();

var worker = new Worker("offscreencanvas.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);

offscreencanvas.js (worker 코드):

js
onmessage = function (evt) {
  var canvas = evt.data.canvas;
  var gl = canvas.getContext("webgl");

  // ... gl 컨텍스트를 이용해 무언가를 그립니다 ...
};

worker 내에서 requestAnimationFrame 또한 사용할 수 있습니다.

js
onmessage = function (evt) {
  const canvas = evt.data.canvas;
  const gl = canvas.getContext("webgl");

  function render(time) {
    // ... gl 컨텍스트를 이용해 무언가를 그립니다 ...
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
};

상세

Specification
HTML Standard
# the-offscreencanvas-interface

브라우저 호환성

BCD tables only load in the browser

더 보기