OffscreenCanvas
===============

Baseline 2023
-------------

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

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

**`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 with JavaScript enabled. Enable JavaScript to view data.

더 보기
----

* WebGL Off the Main Thread – Mozilla Hacks
* `CanvasRenderingContext2D` (en-US)
* `ImageBitmap` (en-US)
* `ImageBitmapRenderingContext` (en-US)
* `HTMLCanvasElement.transferControlToOffscreen()` (en-US)
* `WebGLRenderingContext.commit()`