OffscreenCanvas & Worker Rendering

The 60fps Illusion

You built a data visualization that draws 50,000 data points on a canvas. It looks great. Then the user opens a dropdown menu and it stutters. They type in a search box and keystrokes lag by 200ms. The visualization is rendering at a smooth 60fps, but it's consuming so much main thread time that everything else suffers.

// This monopolizes the main thread during every frame
function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 50_000; i++) {
    const x = data[i].x * scaleX;
    const y = data[i].y * scaleY;
    ctx.fillRect(x, y, 2, 2);
  }
  requestAnimationFrame(render);
}

Each frame takes 8-12ms of main thread time. That leaves 4-8ms for input processing, layout, paint, and everything else. On a slightly slower device, you're over budget. The visualization looks smooth but the rest of the app feels broken.

OffscreenCanvas solves this by moving the entire rendering pipeline to a worker. The canvas still displays on the main thread's page, but the drawing commands execute on a separate thread.

Two Ways to Use OffscreenCanvas

Path 1: Transfer from an existing canvas

The most common pattern. You have a <canvas> element in your HTML and transfer its rendering control to a worker:

// main.js
const canvas = document.getElementById('chart');
const offscreen = canvas.transferControlToOffscreen();

const worker = new Worker('/workers/renderer.js', { type: 'module' });
worker.postMessage({ canvas: offscreen }, [offscreen]);
// The main thread can no longer draw to this canvas
// All rendering happens in the worker

// renderer.js
let ctx;
let width;
let height;

self.onmessage = (event) => {
  if (event.data.canvas) {
    const canvas = event.data.canvas;
    ctx = canvas.getContext('2d');
    width = canvas.width;
    height = canvas.height;
    startRendering();
  }
};

function startRendering() {
  function frame() {
    ctx.clearRect(0, 0, width, height);
    drawVisualization(ctx);
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}

After transferControlToOffscreen(), the main thread loses all ability to draw to that canvas. The worker owns it exclusively. The browser composites the worker's rendering output into the page automatically.

Path 2: Create OffscreenCanvas directly in a worker

You can create an OffscreenCanvas inside a worker without any DOM element. This is useful for off-screen image processing where you don't need to display the result immediately:

// worker.js — no DOM canvas needed
const canvas = new OffscreenCanvas(1920, 1080);
const ctx = canvas.getContext('2d');

self.onmessage = async (event) => {
  const bitmap = event.data.image;
  ctx.drawImage(bitmap, 0, 0);

  const imageData = ctx.getImageData(0, 0, 1920, 1080);
  applyFilter(imageData);
  ctx.putImageData(imageData, 0, 0);

  const result = canvas.transferToImageBitmap();
  self.postMessage({ processed: result }, [result]);
};

The worker creates the canvas, processes an image, and transfers the result back as an ImageBitmap. The main thread can then draw it to a visible canvas or display it directly using a bitmaprenderer context.

requestAnimationFrame in Workers

Workers have their own requestAnimationFrame — it's tied to the display refresh rate just like the main thread's version. This lets you build smooth animations entirely in the worker:

// renderer.js
let canvas;
let ctx;
let time = 0;

self.onmessage = (event) => {
  canvas = event.data.canvas;
  ctx = canvas.getContext('2d');
  animate();
};

function animate() {
  time += 0.016;
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < 1000; i++) {
    const x = Math.sin(time + i * 0.01) * 200 + canvas.width / 2;
    const y = Math.cos(time + i * 0.013) * 200 + canvas.height / 2;
    ctx.fillStyle = `hsl(${(i * 0.36 + time * 50) % 360}, 70%, 60%)`;
    ctx.beginPath();
    ctx.arc(x, y, 3, 0, Math.PI * 2);
    ctx.fill();
  }

  requestAnimationFrame(animate);
}

The main thread is completely free. No JavaScript runs on the main thread during this animation — all 1000 animated circles are drawn by the worker. Input events, layout, and paint all happen without contention.

WebGL in Workers

OffscreenCanvas supports WebGL and WebGL2 contexts, enabling GPU-accelerated rendering from a worker:

// worker.js — WebGL in a worker
self.onmessage = (event) => {
  const canvas = event.data.canvas;
  const gl = canvas.getContext('webgl2');

  if (!gl) {
    self.postMessage({ error: 'WebGL2 not available in worker' });
    return;
  }

  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  function render() {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    drawScene(gl);
    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
};

This is particularly powerful for data visualization libraries, 3D renderers, and map engines that do heavy GPU work. The shader compilation, buffer uploads, and draw calls all happen on the worker thread.

Handling Canvas Resize

Canvas resize is tricky with OffscreenCanvas because ResizeObserver only works on the main thread. You need to relay resize events:

// main.js
const canvas = document.getElementById('chart');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('/workers/renderer.js', { type: 'module' });

worker.postMessage({ type: 'INIT', canvas: offscreen }, [offscreen]);

const observer = new ResizeObserver((entries) => {
  const entry = entries[0];
  const dpr = window.devicePixelRatio || 1;
  const width = Math.round(entry.contentBoxSize[0].inlineSize * dpr);
  const height = Math.round(entry.contentBoxSize[0].blockSize * dpr);
  worker.postMessage({ type: 'RESIZE', width, height, dpr });
});

observer.observe(canvas);

// renderer.js
let canvas;
let ctx;
let dpr = 1;

self.onmessage = (event) => {
  if (event.data.type === 'INIT') {
    canvas = event.data.canvas;
    ctx = canvas.getContext('2d');
    return;
  }
  if (event.data.type === 'RESIZE') {
    canvas.width = event.data.width;
    canvas.height = event.data.height;
    dpr = event.data.dpr;
    ctx.scale(dpr, dpr);
    redraw();
  }
};

Production Pattern: Chart Rendering Pipeline

Here's how a real charting library would use OffscreenCanvas:

// main.js
class OffscreenChart {
  #worker;
  #resizeObserver;

  constructor(canvasElement) {
    const offscreen = canvasElement.transferControlToOffscreen();
    this.#worker = new Worker('/workers/chart.js', { type: 'module' });
    this.#worker.postMessage(
      { type: 'INIT', canvas: offscreen },
      [offscreen]
    );

    this.#resizeObserver = new ResizeObserver((entries) => {
      const { inlineSize, blockSize } = entries[0].contentBoxSize[0];
      const dpr = devicePixelRatio;
      this.#worker.postMessage({
        type: 'RESIZE',
        width: Math.round(inlineSize * dpr),
        height: Math.round(blockSize * dpr),
        dpr,
      });
    });
    this.#resizeObserver.observe(canvasElement);
  }

  setData(data) {
    if (data.buffer instanceof ArrayBuffer) {
      const copy = data.buffer.slice(0);
      this.#worker.postMessage(
        { type: 'DATA', buffer: copy },
        [copy]
      );
    } else {
      this.#worker.postMessage({ type: 'DATA', values: data });
    }
  }

  destroy() {
    this.#resizeObserver.disconnect();
    this.#worker.terminate();
  }
}

// chart.js (worker)
let canvas, ctx, dpr, dataPoints;

self.onmessage = (event) => {
  const { type } = event.data;

  if (type === 'INIT') {
    canvas = event.data.canvas;
    ctx = canvas.getContext('2d');
  }

  if (type === 'RESIZE') {
    canvas.width = event.data.width;
    canvas.height = event.data.height;
    dpr = event.data.dpr;
    scheduleRender();
  }

  if (type === 'DATA') {
    dataPoints = event.data.buffer
      ? new Float64Array(event.data.buffer)
      : event.data.values;
    scheduleRender();
  }
};

let renderScheduled = false;
function scheduleRender() {
  if (renderScheduled) return;
  renderScheduled = true;
  requestAnimationFrame(() => {
    renderScheduled = false;
    render();
  });
}

function render() {
  if (!ctx || !dataPoints) return;
  const w = canvas.width / dpr;
  const h = canvas.height / dpr;

  ctx.save();
  ctx.scale(dpr, dpr);
  ctx.clearRect(0, 0, w, h);

  ctx.beginPath();
  ctx.strokeStyle = '#3b82f6';
  ctx.lineWidth = 1.5;

  const step = w / (dataPoints.length - 1);
  const max = Math.max(...dataPoints);
  const min = Math.min(...dataPoints);
  const range = max - min || 1;

  for (let i = 0; i < dataPoints.length; i++) {
    const x = i * step;
    const y = h - ((dataPoints[i] - min) / range) * h * 0.9 - h * 0.05;
    if (i === 0) ctx.moveTo(x, y);
    else ctx.lineTo(x, y);
  }

  ctx.stroke();
  ctx.restore();
}

Browser Support and Fallbacks

OffscreenCanvas is supported in Chrome 69+, Firefox 105+, Safari 16.4+, and Edge 79+. The transferControlToOffscreen method has the same support. For older browsers, fall back to main-thread rendering:

function createRenderer(canvasElement) {
  if (typeof canvasElement.transferControlToOffscreen === 'function') {
    return new OffscreenRenderer(canvasElement);
  }
  return new MainThreadRenderer(canvasElement);
}

Challenge: Responsive Particle System

// Build a particle system that:
// 1. Renders 10,000 particles on OffscreenCanvas in a worker
// 2. Particles respond to mouse position (sent from main thread)
// 3. Handles canvas resize with correct DPR
// 4. Falls back to main-thread rendering if OffscreenCanvas
//    is not supported
//
// Particles should drift randomly and be attracted toward
// the mouse cursor position.

// main.js
// Your code: setup, mouse tracking, resize handling

// worker.js
// Your code: particle simulation + rendering

Key Rules