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() (en-US)

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

OffscreenCanvas.convertToBlob() (en-US)

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

OffscreenCanvas.transferToImageBitmap() (en-US)

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

예시

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

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

ImageBitmap을 화면에 표시하려면, 현재 (화면에 보여지고 있는) 캔버스 요소의 canvas.getContext("bitmaprenderer") 메소드를 호출했을 때 생성되는 ImageBitmapRenderingContext (en-US) 객체를 사용하면 됩니다. 이 컨텍스트는 캔버스의 내용을 주어진 ImageBitmap으로 전환하는 기능을 제공합니다. OffscreenCanvas에서 이전에 렌더링이 되어서 등록된 ImageBitmap을 이용한 ImageBitmapRenderingContext.transferFromImageBitmap() (en-US)을 호출하면 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() (en-US)를 호출하는 것입니다. 여기서 메인 스레드는 OffscreenCanvas 객체를 반환하는 HTMLCanvasElement 객체를 가지고 있습니다. getContext() (en-US)를 호출하면 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

더 보기