Graphics & Compute

OffscreenCanvas

Probing…

OffscreenCanvas is a web platform capability in the Graphics & Compute category. Render canvases from workers, off the main thread. Supported in Chromium 69+, Firefox 105+, and Safari 16.4+.

Try it

Loading demo…

Code

const off = canvas.transferControlToOffscreen()
const worker = new Worker(url)
worker.postMessage({ canvas: off }, [off])

// inside the worker:
self.onmessage = (e) => {
  const ctx = e.data.canvas.getContext('2d')
  function loop() {
    ctx.fillRect(0, 0, w, h)
    // ...draw bouncing shapes...
    requestAnimationFrame(loop)
  }
  loop()
}

Browser support

Chromium
69
Firefox
105
Safari
16.4

Frequently asked questions

Which browsers support OffscreenCanvas?

Supported in Chromium 69+, Firefox 105+, and Safari 16.4+.

Does OffscreenCanvas require HTTPS?

No. OffscreenCanvas works without a secure context, though serving your site over HTTPS is always recommended.

What is OffscreenCanvas used for?

Render canvases from workers, off the main thread.

Can I try OffscreenCanvas in my browser?

Yes. shwcs.net runs a live OffscreenCanvas demo that probes your current browser and lets you try the API. Everything runs locally — nothing is sent anywhere.

MDN reference ↗ Specification ↗