This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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> 요소가 있습니다.

<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 또는 메인 스레드위에서 <canvas> 요소의 transferControlToOffscreen()를 호출하는 것입니다. 여기서 메인 스레드는 OffscreenCanvas 객체를 반환하는 HTMLCanvasElement 객체를 가지고 있습니다. 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
HTML Living Standard
The definition of 'OffscreenCanvas' in that specification.
Living Standard  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
OffscreenCanvas
Experimental
Chrome Full support 69Edge ? Firefox Full support 44
Disabled
Full support 44
Disabled
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 56Safari No support NoWebView Android Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental canvas features preference.
Chrome Android Full support 69Firefox Android Full support 44
Disabled
Full support 44
Disabled
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS No support NoSamsung Internet Android No support No
OffscreenCanvas() constructor
Experimental
Chrome Full support 69Edge ? Firefox Full support 46
Disabled
Full support 46
Disabled
Disabled From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 56Safari No support NoWebView Android No support NoChrome Android Full support 69Firefox Android Full support 46
Disabled
Full support 46
Disabled
Disabled From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS No support NoSamsung Internet Android No support No
height
Experimental
Chrome Full support 69Edge ? Firefox Full support 44
Disabled
Full support 44
Disabled
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 56Safari No support NoWebView Android No support NoChrome Android Full support 69Firefox Android Full support 44
Disabled
Full support 44
Disabled
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS No support NoSamsung Internet Android No support No
width
Experimental
Chrome Full support 69Edge ? Firefox Full support 44
Disabled
Full support 44
Disabled
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 56Safari No support NoWebView Android No support NoChrome Android Full support 69Firefox Android Full support 44
Disabled
Full support 44
Disabled
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS No support NoSamsung Internet Android No support No
getContext
Experimental
Chrome Full support 69Edge ? Firefox Full support 44
Disabled
Full support 44
Disabled
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 56Safari No support NoWebView Android No support NoChrome Android Full support 69Firefox Android Full support 44
Disabled
Full support 44
Disabled
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS No support NoSamsung Internet Android No support No
toBlob
Experimental
Chrome Full support 69Edge ? Firefox Full support 46
Disabled
Full support 46
Disabled
Disabled From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 56Safari No support NoWebView Android No support NoChrome Android Full support 69Firefox Android Full support 46
Disabled
Full support 46
Disabled
Disabled From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS No support NoSamsung Internet Android No support No
transferToImageBitmap
Experimental
Chrome Full support 69Edge ? Firefox Full support 46
Disabled
Full support 46
Disabled
Disabled From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 56Safari No support NoWebView Android No support NoChrome Android Full support 69Firefox Android Full support 46
Disabled
Full support 46
Disabled
Disabled From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.

더 보기

문서 태그 및 공헌자

이 페이지의 공헌자: mdnwebdocs-bot, moonformeli
최종 변경자: mdnwebdocs-bot,