BabylonJS/Babylon.js · error

OffscreenCanvas not supported - cannot create Player

Error message

OffscreenCanvas not supported - cannot create Player

What it means

The WorkerLottiePlayer (Player) constructor throws immediately if the browser lacks OffscreenCanvas support, because the player renders on a worker using OffscreenCanvas. The class docs direct you to LocalLottiePlayer in that case.

Source

Thrown at packages/dev/lottiePlayer/src/player.ts:55

    private _preWarmReject: ((reason?: any) => void) | null = null;
    private _worker: Nullable<globalThis.Worker> = null;
    private _canvas: Nullable<HTMLCanvasElement> = null;
    private _animationWidth: number = 0;
    private _animationHeight: number = 0;
    private _scaleFactors: ScaleFactors = { canvasScale: 1 };
    private _resizeObserver: Nullable<ResizeObserver> = null;
    private _resizeDebounceHandle: number | null = null;
    private _resizeDebounceMs: number = 1000 / 60; // Debounce resize updates to approximately 60 FPS

    /**
     * Creates a new instance of the LottiePlayer.
     * If OffscreenCanvas is not supported by the browser, the animation will not play. Try using LocalLottiePlayer instead.
     * @throws Error if OffscreenCanvas is not supported
     */
    public constructor() {
        // Check if OffscreenCanvas is supported
        if (!("OffscreenCanvas" in window)) {
            throw new Error("OffscreenCanvas not supported - cannot create Player");
        }
    }

    /**
     * Pre-warms the worker and base renderer code. Animation-specific text or image renderer chunks
     * load later, after the animation data is known.
     * @returns A Promise that resolves to this Player instance when the worker is ready
     * @throws Error if the player is already playing or disposed
     */
    public async preWarmPlayerAsync(): Promise<Player> {
        if (this._playing || this._disposed) {
            throw new Error("Invalid call to preWarmPlayerAsync - player is already playing or disposed");
        }

        if (this._preWarmed) {
            return this;
        }

View on GitHub (pinned to 0592b347b8)

Solutions

1. Use LocalLottiePlayer instead when OffscreenCanvas is unavailable
2. Feature-detect `"OffscreenCanvas" in window` before constructing and branch player choice
3. Drop a runtime polyfill is not viable — instead target modern browsers or fall back to the main-thread renderer

Example fix

// before
const player = new Player();
// after
const player = "OffscreenCanvas" in window ? new Player() : new LocalLottiePlayer();

if (!("OffscreenCanvas" in window)) {
  player = new LocalLottiePlayer();
} else {
  player = new Player();
}

function supportsOffscreenCanvas(w: Window): w is Window & { OffscreenCanvas: typeof OffscreenCanvas } {
  return "OffscreenCanvas" in w;
}

let player;
try {
  player = new Player();
} catch (e) {
  if (e.message.includes('OffscreenCanvas not supported')) {
    player = new LocalLottiePlayer();
  } else throw e;
}

When it happens

Trigger: Constructing the worker-based Player in browsers without OffscreenCanvas (older Safari/Firefox, some WebViews, non-browser environments lacking `window`).

Common situations: Legacy Safari (<16.4-ish) or Firefox (<105) users; embedded WebViews (older iOS WKWebView configs); SSR/unit-test environments without OffscreenCanvas.

Related errors

• WebGL not supported
• GPU Particle System is not supported.

AI-assisted analysis of BabylonJS/Babylon.js@0592b347b8 (2026-08-30). Data as JSON: /api/errors/5e5178a932a78e7b. Report an issue: GitHub.