remotion-dev/remotion · error · Error

The display canvas would be ${displayWidth}×${displayHeight}

Error message

The display canvas would be ${displayWidth}×${displayHeight} pixels; its maximum side is ${maxCanvasDimension.toLocaleString()} pixels.

What it means

Canvas Capture computes the display-canvas size as width * window.devicePixelRratio (and height) and rejects if either side exceeds the platform's max canvas backing-store dimension. This is a hard browser limit on the canvas itself, independent of the encoded output size. The check fires in validateCaptureSize before any capture begins.

Source

Thrown at packages/canvas-capture-extension/src/capture.ts:100

}) => {
	const resolvedCrop = resolveCrop(crop, width, height) ?? {
		left: 0,
		top: 0,
		width,
		height,
	};
	const displayWidth = Math.max(1, Math.round(width * window.devicePixelRatio));
	const displayHeight = Math.max(
		1,
		Math.round(height * window.devicePixelRatio),
	);
	const outputSize = getScaledCanvasSize(
		resolvedCrop.width,
		resolvedCrop.height,
		scale,
	);
	if (displayWidth > maxCanvasDimension || displayHeight > maxCanvasDimension) {
		throw new Error(
			`The display canvas would be ${displayWidth}×${displayHeight} pixels; its maximum side is ${maxCanvasDimension.toLocaleString()} pixels.`,
		);
	}

	if (
		outputSize.width > maxEncodedDimension ||
		outputSize.height > maxEncodedDimension
	) {
		throw new Error(
			`The encoded frame would be ${outputSize.width}×${outputSize.height} pixels at ${scale}× scale; its maximum even side is ${maxEncodedDimension.toLocaleString()} pixels. Reduce the scale or select a smaller area.`,
		);
	}

	return outputSize;
};

export const getCapturePreflight = ({
	scale,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Crop the capture to a smaller region instead of capturing the whole page.
2. Lower the browser zoom / devicePixelRatio before capturing so display pixels shrink.
3. Capture a single element rather than the full page.
4. Switch to a lower-DPR display or override devicePixelRatio if the platform allows.

Example fix

// before
getCapturePreflight({scale: 2, crop: null}); // whole 4K page -> display canvas too large

// after
getCapturePreflight({scale: 2, crop: {left: 0, top: 0, width: 1280, height: 720}});

// Mirror validateCaptureSize before opening the capture UI
const MAX_CANVAS = 32767; // use the platform's reported max canvas size
const displayFits = (width: number, height: number, dpr = window.devicePixelRatio) =>
  Math.round(width * dpr) <= MAX_CANVAS && Math.round(height * dpr) <= MAX_CANVAS;
if (!displayFits(pageWidth, pageHeight)) {
  // force a crop or lower DPR before capture
}

try {
  getCapturePreflight({scale, crop});
} catch (err) {
  if (String(err?.message ?? '').startsWith('The display canvas would be')) {
    // suggest cropping or lowering page zoom, then retry
  } else throw err;
}

When it happens

Trigger: Capturing a very large page/element at high devicePixelRatio (retina/4K), or capturing the whole page when it is taller/wider than the max canvas dimension after DPR scaling. Also zooming the page before capture inflates the displayed pixel size.

Common situations: Retina displays with DPR >= 2; full-page captures of long pages; high-resolution external monitors; browser zoom > 100% increasing effective size.

Related errors

• The encoded frame would be ${outputSize.width}×${outputSize.
• The required HTML-in-canvas APIs are unavailable. Open chrom
• Could not create an HTML-in-canvas OffscreenCanvas 2D contex
• No canvas recording was available to open.
• The canvas capture could not be found.

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/03647c316e508317. Report an issue: GitHub.