OffscreenCanvas는 화면 밖에서 렌더링되는 캔버스 인터페이스입니다. window 객체와 worker 객체 모두 지원합니다.
OffscreenCanvas 생성자. 새 OffscreenCanvas 객체를 생성합니다.OffscreenCanvas 에서 만들어진 프레임을 동기적으로 화면에 보여주는 방법OffscreenCanvas API를 사용하는 방법은 OffscreenCanvas에 속한 {{domxref("RenderingContext")}}를 이용해 새로운 프레임 객체를 생성하는 것입니다. 새 프레임이 컨텍스트에 렌더링이 되고나면, 가장 최근에 렌더링 된 이미지를 저장하는 {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} 메소드를 호출할 수 있습니다. 이 메소드는 다른 수 많은 Web API에서 사용되고 있는 {{domxref("ImageBitmap")}} 객체를 리턴합니다.
ImageBitmap을 화면에 표시하려면, 현재 (화면에 보여지고 있는) 캔버스 요소의 canvas.getContext("bitmaprenderer") 메소드를 호출했을 때 생성되는 {{domxref("ImageBitmapRenderingContext")}} 객체를 사용하면 됩니다. 이 컨텍스트는 캔버스의 내용을 주어진 ImageBitmap으로 전환하는 기능을 제공합니다. OffscreenCanvas에서 이전에 렌더링이 되어서 등록된 ImageBitmap을 이용한 {{domxref("ImageBitmapRenderingContext.transferFromImageBitmap()")}}을 호출하면 ImageBitmap이 캔버스에 표시되고 소유권 역시 캔버스로 넘어갑니다. 단일 OffscreenCanvas는 프레임들을 임의의 다른 ImageBitmapRenderingContext 객체로 전달합니다.
아래에 두 개의 {{HTMLElement("canvas")}} 요소가 있습니다.
<canvas id="one"></canvas> <canvas id="two"></canvas>
다음의 코드는 위에서 설명한 것처럼 OffscreenCanvas를 이용해 렌더링합니다.
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 또는 메인 스레드위에서 {{HTMLElement("canvas")}} 요소의 {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}}를 호출하는 것입니다. 여기서 메인 스레드는 OffscreenCanvas 객체를 반환하는 {{domxref("HTMLCanvasElement")}} 객체를 가지고 있습니다. {{domxref("OffscreenCanvas.getContext", "getContext()")}}를 호출하면 OffscreenCanvas에서 RenderingContext를 얻을 수 있습니다.
main.js (메인 스레드 코드):
var htmlCanvas = document.getElementById("canvas");
var offscreen = htmlCanvas.transferControlToOffscreen();
var worker = new Worker("offscreencanvas.js");
worker.postMessage({canvas: offscreen}, [offscreen]);
offscreencanvas.js (worker 코드):
onmessage = function(evt) {
var canvas = evt.data.canvas;
var gl = canvas.getContext("webgl");
// ... gl 컨텍스트를 이용해 무언가를 그립니다 ...
};
worker 내에서 requestAnimationFrame 또한 사용할 수 있습니다.
onmessage = function(evt) {
const canvas = evt.data.canvas;
const gl = canvas.getContext("webgl");
function render(time) {
// ... gl 컨텍스트를 이용해 무언가를 그립니다 ...
requestAnimationFrame(render);
}
requestAnimationFrame(render);
};
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('HTML WHATWG', "scripting.html#the-offscreencanvas-interface", "OffscreenCanvas")}} | {{Spec2('HTML WHATWG')}} |
{{Compat("api.OffscreenCanvas")}}