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

The OffscreenCanvas.toBlob() method creates a Blob object representing the image contained in the canvas.


Promise<Blob> OffscreenCanvas.toBlob(type, encoderOptions);


type Optional
A DOMString indicating the image format. The default type is image/png.
encoderOptions Optional
A Number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp. If this argument is anything else, the default value for image quality is used. Other arguments are ignored.

Return value

A Promise returning a Blob object representing the image contained in the canvas.


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

// ... some drawing using the gl context ...

offscreen.toBlob().then(function(blob) {

// Blob { size: 334, type: "image/png" }


Currently drafted as a proposal: OffscreenCanvas.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support No ?461 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No No ?461 No No No

1. From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.


See also

Document Tags and Contributors

Contributors to this page: some-body, fscholz
Last updated by: some-body,