.1 200 OK Connection: keep-alive Content-Length: 162663 etag: "7666d6b479eb839014fb606af2564ec9" content-type: text/html server: Google Frontend x-goog-stored-content-encoding: identity referrer-policy: strict-origin-when-cross-origin x-goog-metageneration: 1 x-goog-storage-class: STANDARD x-cloud-trace-context: 7f86ad24cbe34945d8622ce232d5b99b x-goog-hash: crc32c=Yz8Aag==, md5=dmbWtHnrg5AU+2Bq8lZOyQ== content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' assets.codepen.io production-assets.codepen.io https://js.stripe.com transcend-cdn.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' assets.codepen.io production-assets.codepen.io https://js.stripe.com transcend-cdn.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline' transcend-cdn.com; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net telemetry.transcend.io telemetry.us.transcend.io transcend-cdn.com https://api.github.com/search/issues https://api.stripe.com; font-src 'self'; frame-src 'self' mdn.github.io *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self'; x-guploader-uploadid: AJ5rDhHZpiUmsJPKY9kW-7Z1jf4UOpcGO4c5etZJolcXOU3UPPgUAdBdyMax8-qlBDsFLb3MK_DQN0Q x-frame-options: DENY x-goog-stored-content-length: 162663 x-content-type-options: nosniff x-goog-meta-goog-reserved-file-mtime: 1782954824 strict-transport-security: max-age=63072000 via: 1.1 google, 1.1 varnish, 1.1 varnish, 1.1 varnish x-goog-generation: 1782955819893580 expires: Thu, 02 Jul 2026 21:19:16 GMT last-modified: Thu, 02 Jul 2026 01:30:20 GMT cache-control: public, max-age=3600 Accept-Ranges: bytes Age: 0 Date: Thu, 02 Jul 2026 20:19:16 GMT X-Served-By: cache-bfi-kbfi7400053-BFI, cache-bfi-kbfi7400053-BFI, cache-bfi-kbfi7400113-BFI, cache-dfw-ktki8620074-DFW X-Cache: MISS, MISS, MISS X-Cache-Hits: 0, 0, 0 X-Timer: S1783023557.699676,VS0,VE238 Vary: Accept-Encoding OffscreenCanvas - Web APIs | MDN Skip to main content Skip to search MDN HTML HTML: Markup language HTML reference Elements Global attributes Attributes See all… HTML guides Responsive images HTML cheatsheet Date & time formats See all… Markup languages SVG MathML XML CSS CSS: Styling language CSS reference Properties Selectors At-rules Values See all… CSS guides Box model Animations Flexbox Colors See all… Layout cookbook Column layouts Centering an element Card component See all… JavaScript JS JavaScript: Scripting language JS reference Standard built-in objects Expressions & operators Statements & declarations Functions See all… JS guides Control flow & error handing Loops and iteration Working with objects Using classes See all… Web APIs Web APIs: Programming interfaces Web API reference File system API Fetch API Geolocation API HTML DOM API Push API Service worker API See all… Web API guides Using the Web animation API Using the Fetch API Working with the History API Using the Web speech API Using web workers All All web technology Technologies Accessibility HTTP URI Web extensions WebAssembly WebDriver See all… Topics Media Performance Privacy Security Progressive web apps Learn Learn web development Frontend developer course Getting started modules Core modules MDN Curriculum Check out the video course from Scrimba, our partner Learn HTML Structuring content with HTML module Learn CSS CSS styling basics module CSS layout module Learn JavaScript Dynamic scripting with JavaScript module Tools Discover our tools Playground HTTP Observatory Border-image generator Border-radius generator Box-shadow generator Color format converter Color mixer Shape generator About Get to know MDN better About MDN Advertise with us Community MDN on GitHub Blog Toggle sidebar Web Web APIs OffscreenCanvas Theme OS default Light Dark English (US) Remember language Learn more Deutsch English (US) Français 日本語 한국어 中文 (简体) OffscreenCanvas Baseline Widely available * This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023. * Some parts of this feature may have varying levels of support. Learn more See full compatibility Note: This feature is available in Web Workers . When using the <canvas> element or the Canvas API , rendering, animation, and user interaction usually happen on the main execution thread of a web application. The computation relating to canvas animations and rendering can have a significant impact on application performance. The OffscreenCanvas interface provides a canvas that can be rendered off screen, decoupling the DOM and the Canvas API so that the <canvas> element is no longer entirely dependent on the DOM. Rendering operations can also be run inside a worker context, allowing you to run some tasks in a separate thread and avoid heavy work on the main thread. OffscreenCanvas is a transferable object . EventTarget OffscreenCanvas In this article Constructors Instance properties Instance methods Events Examples Specifications Browser compatibility See also Constructors OffscreenCanvas() OffscreenCanvas constructor. Creates a new OffscreenCanvas object. Instance properties OffscreenCanvas.height The height of the offscreen canvas. OffscreenCanvas.width The width of the offscreen canvas. Instance methods OffscreenCanvas.getContext() Returns a drawing context for the offscreen canvas, or null if the context identifier is not supported, or the offscreen canvas has already been set to a different context mode. OffscreenCanvas.convertToBlob() Creates a Blob object representing the image contained in the canvas. OffscreenCanvas.transferToImageBitmap() Creates an ImageBitmap object from the most recently rendered image of the OffscreenCanvas . See its reference for important notes on managing this ImageBitmap . Events Inherits events from its parent, EventTarget . Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface. contextlost Fired if the browser detects that an OffscreenCanvasRenderingContext2D context is lost. contextrestored Fired if the browser successfully restores an OffscreenCanvasRenderingContext2D context. Examples Synchronous display of frames produced by an OffscreenCanvas One way to use the OffscreenCanvas API is to use a rendering context that has been obtained from an OffscreenCanvas object to generate new frames. Once a new frame has finished rendering in this context, the transferToImageBitmap() method can be called to save the most recent rendered image. This method returns an 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 an 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 ImageBitmapRenderingContext.transferFromImageBitmap() 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 <canvas> elements html <canvas id="one"></canvas> <canvas id="two"></canvas> the following code will provide the rendering using OffscreenCanvas as described above. js const one = document.getElementById("one").getContext("bitmaprenderer"); const two = document.getElementById("two").getContext("bitmaprenderer"); const offscreen = new OffscreenCanvas(256, 256); const gl = offscreen.getContext("webgl"); // Perform some drawing for the first canvas using the gl context const bitmapOne = offscreen.transferToImageBitmap(); one.transferFromImageBitmap(bitmapOne); // Perform some more drawing for the second canvas const bitmapTwo = offscreen.transferToImageBitmap(); two.transferFromImageBitmap(bitmapTwo); Asynchronous display of frames produced by an OffscreenCanvas Another way to use the OffscreenCanvas API, is to call transferControlToOffscreen() on a <canvas> element, either on a worker or the main thread, which will return an OffscreenCanvas object from an HTMLCanvasElement object from the main thread. Calling getContext() will then obtain a rendering context from that OffscreenCanvas . The main.js script (main thread) may look like this: js const htmlCanvas = document.getElementById("canvas"); const offscreen = htmlCanvas.transferControlToOffscreen(); const worker = new Worker("offscreen-canvas.js"); worker.postMessage({ canvas: offscreen }, [offscreen]); While the offscreen-canvas.js script (worker thread) can look like this: js onmessage = (evt) => { const canvas = evt.data.canvas; const gl = canvas.getContext("webgl"); // Perform some drawing using the gl context }; It's also possible to use requestAnimationFrame() in workers: js onmessage = (evt) => { const canvas = evt.data.canvas; const gl = canvas.getContext("webgl"); function render(time) { // Perform some drawing using the gl context requestAnimationFrame(render); } requestAnimationFrame(render); }; For a full example, see the OffscreenCanvas example source on GitHub or run the OffscreenCanvas example live . Specifications Specification HTML # the-offscreencanvas-interface Browser compatibility Enable JavaScript to view this browser compatibility table. See also CanvasRenderingContext2D OffscreenCanvasRenderingContext2D ImageBitmap ImageBitmapRenderingContext HTMLCanvasElement.transferControlToOffscreen() requestAnimationFrame() WebGL Off the Main Thread – Mozilla Hacks (2016) Help improve MDN Was this page helpful to you? Yes No Learn how to contribute This page was last modified on Oct 26, 2024 by MDN contributors . View this page on GitHub • Report a problem with this content Filter sidebar Clear filter input Canvas API OffscreenCanvas Constructor OffscreenCanvas() Instance properties height width Instance methods convertToBlob() getContext() transferToImageBitmap() Events contextlost contextrestored Inheritance EventTarget Related pages for Canvas API CanvasGradient CanvasPattern CanvasRenderingContext2D HTMLCanvasElement ImageBitmap ImageBitmapRenderingContext ImageData OffscreenCanvasRenderingContext2D Path2D TextMetrics Window .createImageBitmap() WorkerGlobalScope .createImageBitmap() Guides Manipulating video using canvas Tutorial Canvas tutorial Basic usage of canvas Drawing shapes with canvas Applying styles and colors Drawing text Using images Transformations Compositing and clipping Basic animations Advanced animations Pixel manipulation with canvas Optimizing canvas Finale MDN Your blueprint for a better internet. MDN About Blog Mozilla careers Advertise with us MDN Plus Product help Contribute MDN Community Community resources Writing guidelines MDN Discord MDN on GitHub Developers Web technologies Learn web development Guides Tutorials Glossary Hacks blog Mozilla Website Privacy Notice Telemetry Settings Legal Community Participation Guidelines Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license .