The OffscreenCanvas
interface provides a canvas that can be rendered off screen. It is available in both, the window and in a worker context.
Note: This API is currently implemented for WebGL1 and WebGL2 contexts only. See {{bug(801176)}} for Canvas 2D API support from workers.
Constructors
- {{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}
OffscreenCanvas
constructor. Creates a newOffscreenCanvas
object.
Properties
- {{domxref("OffscreenCanvas.height")}}
- The height of the offscreen canvas.
- {{domxref("OffscreenCanvas.width")}}
- The width of the offscreen canvas.
Methods
- {{domxref("OffscreenCanvas.getContext()")}}
- Returns a rendering context for the offscreen canvas.
- {{domxref("OffscreenCanvas.toBlob()")}}
- Creates a {{domxref("Blob")}} object representing the image contained in the canvas.
- {{domxref("OffscreenCanvas.transferToImageBitmap()")}}
- Creates an {{domxref("ImageBitmap")}} object from the most recently rendered image of the
OffscreenCanvas
.
Examples
Synchronous display of frames produced by an OffscreenCanvas
One way to use the OffscreenCanvas
API, is to use a {{domxref("RenderingContext")}} that has been obtained from an OffscreenCanvas
object to generate new frames. Once a new frame has finished rendering in this context, the {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} method can be called to save the most recent rendered image. This method returns an {{domxref("ImageBitmap")}} object, which can be used in a variety of Web APIs and also in a second canvas without creating a transfer copy.
To display the ImageBitmap
, you can use a {{domxref("ImageBitmapRenderingContext")}} context, which can be created by calling canvas.getContext("bitmaprenderer")
on a (visible) canvas element. This context only provides functionality to replace the canvas's contents with the given ImageBitmap
. A call to {{domxref("ImageBitmapRenderingContext.transferImageBitmap()")}} with the previously rendered and saved ImageBitmap
from the OffscreenCanvas, will display the ImageBitmap
on the canvas and transfer its ownership to the canvas. A single OffscreenCanvas
may transfer frames into an arbitrary number of other ImageBitmapRenderingContext
objects.
Given these two {{HTMLElement("canvas")}} elements
<canvas id="one"></canvas> <canvas id="two"></canvas>
the following code will provide the rendering using an OffscreenCanvas
as described above.
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'); // ... some drawing for the first canvas using the gl context ... // Commit rendering to the first canvas var bitmapOne = offscreen.transferToImageBitmap(); one.transferImageBitmap(bitmapOne); // ... some more drawing for the second canvas using the gl context ... // Commit rendering to the second canvas var bitmapTwo = offscreen.transferToImageBitmap(); two.transferImageBitmap(bitmapTwo);
Specifications
{{WhyNoSpecStart}} Currently drafted as a proposal: OffscreenCanvas.{{WhyNoSpecEnd}}
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatGeckoDesktop(44)}} [1] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatGeckoMobile(44)}} [1] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
[1] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled
to true
.
See also
- {{domxref("CanvasRenderingContext2D")}}
- {{domxref("ImageBitmap")}}
- {{domxref("ImageBitmapRenderingContext")}}
- {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}}
- {{domxref("WebGLRenderingContext.commit()")}}