OffscreenCanvas

OffscreenCanvas()

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

OffscreenCanvas.height

캔버스의 높이

OffscreenCanvas.width

캔버스의 너비

OffscreenCanvas.getContext()

렌더링된 캔버스 맥락 객체를 반환합니다.

OffscreenCanvas.convertToBlob()

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

OffscreenCanvas.transferToImageBitmap()

OffscreenCanvas에 렌더링된 이미지중에서 가장 최근에 렌더링된 이미지를 ImageBitmap 객체로 생성합니다. ImageBitmap을 관리하는데 중요한 참고사항을 확인하세요.

부모인 EventTarget으로부터 이벤트를 상속받습니다.

addEventListener() 또는 oneventname 속성에 이벤트 리스너를 할당하여 이벤트를 수신하세요.

contextlost

OffscreenCanvasRenderingContext2D 맥락 손실을 감지하면 발생합니다.

contextrestored

OffscreenCanvasRenderingContext2D 맥락을 복원하면 발생합니다.

OffscreenCanvas API를 사용하는 한 가지 방법은 OffscreenCanvas에 속한 RenderingContext를 이용해 새로운 프레임 객체를 생성하는 것입니다. 새 프레임이 맥락에 렌더링 되고나면, transferToImageBitmap() 메소드를 호출하여 가장 최근에 렌더링 된 이미지를 저장 할 수 있습니다. 이 메소드는 전송 사본을 생성하지 않고도, 다른 수 많은 Web API와 두번째 캔버스에서 사용될 수 있는 ImageBitmap 객체를 리턴합니다.

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

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

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

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

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

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

// ... gl 맥락을 이용해 첫 번째 캔버스에 무언가를 그립니다 ...

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

// ... gl 맥락을 이용해 두 번째 캔버스에 무언가를 그립니다 ...

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

OffscreenCanvas API를 이용하는 또 다른 방법은 <canvas>의 transferControlToOffscreen()를 호출하는 것 입니다. worker 또는 메인 스레드에서 여부와 관계없이, 메인 스레드의 HTMLCanvasElement객체의 OffscreenCanvas 객체를 반환합니다. getContext()를 호출하면 해당 OffscreenCanvas의 RenderingContext를 얻을 수 있습니다.

main.js (메인 스레드 코드)는 다음과 같을 수 있습니다.

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

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

반면에 offscreencanvas.js 스크립트 (worker 스레드)는 다음과 같을 수 있습니다.

onmessage = (evt) => {
  const canvas = evt.data.canvas;
  const gl = canvas.getContext("webgl");
  // ... gl 맥락을 이용해 무언가를 그립니다 ...
};

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

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

  function render(time) {
    // ... gl 맥락을 이용해 무언가를 그립니다 ...
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
};

전체 예제는 GitHub의 OffscreenCanvas 예제 소스를 참조하거나 OffscreenCanvas 예제 라이브를 실행하세요.

• CanvasRenderingContext2D
• OffscreenCanvasRenderingContext2D
• ImageBitmap
• ImageBitmapRenderingContext
• HTMLCanvasElement.transferControlToOffscreen()
• requestAnimationFrame()
• WebGL Off the Main Thread – Mozilla Hacks (2016)