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 ?

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: fscholz
 Last updated by: fscholz,