Canvas rendering without blocking the main thread

Canvas is a core tool for drawing shapes, images, animations, and video content in the browser. Because canvas content is scriptable, it offers a great deal of flexibility—but that flexibility comes with a cost. Canvas logic and rendering typically run on the same thread as user interaction, so heavy computations can directly impact responsiveness.

OffscreenCanvas changes that. Supported in Chrome 69, Firefox 79, Safari 16.4, and Edge 79, it decouples the Canvas API from the DOM, moving rendering off-screen and eliminating the synchronization overhead between the two. More importantly, OffscreenCanvas can run inside a Web Worker, where the DOM isn't available.

Moving canvas work to a worker

Workers give web applications background execution threads, but until OffscreenCanvas, they couldn't access the Canvas API. Since OffscreenCanvas doesn't depend on the DOM, developers can now offload drawing logic to a worker. For instance, you can use a worker to calculate a gradient color:

// file: worker.js
function getGradientColor(percent) {
  const canvas = new OffscreenCanvas(100, 1);
  const ctx = canvas.getContext('2d');
  const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
  gradient.addColorStop(0, 'red');
  gradient.addColorStop(1, 'blue');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, ctx.canvas.width, 1);
  const imgd = ctx.getImageData(0, 0, ctx.canvas.width, 1);
  const colors = imgd.data.slice(percent * 4, percent * 4 + 4);
  return `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, ${colors[3]})`;
}

getGradientColor(40);  // rgba(152, 0, 104, 255 )

Keeping the main thread responsive

Moving heavy calculations to a worker frees up significant resources on the main thread. The transferControlToOffscreen method mirrors a regular canvas to an OffscreenCanvas instance, ensuring that operations applied off-screen are automatically rendered on the original canvas.

const offscreen = document.querySelector('canvas').transferControlToOffscreen();
const worker = new Worker('myworkerurl.js');
worker.postMessage({canvas: offscreen}, [offscreen]);

When a color theme changes and triggers a heavy calculation, the difference is clear: on the main thread, the UI is blocked and buttons become unresponsive; in a worker, the same task has no impact on UI responsiveness.

Demo

The reverse scenario also holds—a busy main thread won't interrupt animation running in a worker. This prevents visual jank during heavy main-thread traffic:

Demo

A regular canvas animation halts when the main thread is artificially overworked, while a worker-based OffscreenCanvas animation continues smoothly.

Integrating with existing libraries

Since the OffscreenCanvas API is broadly compatible with the standard Canvas element, it can serve as a progressive enhancement for popular graphics libraries. For example, feature detection allows you to pass it to Three.js through the canvas option in the renderer constructor:

const canvasEl = document.querySelector('canvas');
const canvas =
  'OffscreenCanvas' in window
    ? canvasEl.transferControlToOffscreen()
    : canvasEl;
canvas.style = {width: 0, height: 0};
const renderer = new THREE.WebGLRenderer({canvas: canvas});

One caveat: Three.js expects the canvas to have style.width and style.height properties. Because OffscreenCanvas is fully detached from the DOM, it lacks these, so you'll need to provide them—either by stubbing them out or by tying them to the original canvas dimensions.

Demo

Note that DOM-related APIs aren't readily available in a worker, so advanced Three.js features such as textures may require additional workarounds. For guidance on getting started, the Google I/O 2017 talk on the topic offers useful pointers.

For applications that rely heavily on canvas graphics, OffscreenCanvas can noticeably improve performance by making rendering contexts available in workers, which increases parallelism and better utilizes multi-core systems.