remotion-dev/remotion · error · Error

HtmlInCanvas: `pixelDensity` must be a positive finite numbe

Error message

HtmlInCanvas: `pixelDensity` must be a positive finite number. Received: ${String(pixelDensity)}.

What it means

Thrown by resolveHtmlInCanvasPixelDensity when `pixelDensity` is defined and is either not a number, not finite (Infinity/-Infinity/NaN), or not positive. Pixel density scales the canvas backing store (`width * pixelDensity`), so non-finite or non-positive values would produce invalid canvas sizes or silently broken sharpness.

Source

Thrown at packages/core/src/HtmlInCanvas.tsx:281

		throw new Error(
			`HtmlInCanvas: \`height\` must be a positive integer. Received: ${String(height)}.`,
		);
	}
}

function resolveHtmlInCanvasPixelDensity(
	pixelDensity: HtmlInCanvasPixelDensity | undefined,
): number {
	if (pixelDensity === undefined) {
		return 1;
	}

	if (
		typeof pixelDensity !== 'number' ||
		!Number.isFinite(pixelDensity) ||
		pixelDensity <= 0
	) {
		throw new Error(
			`HtmlInCanvas: \`pixelDensity\` must be a positive finite number. Received: ${String(pixelDensity)}.`,
		);
	}

	return pixelDensity;
}

const isMissingPaintRecordError = (error: unknown): boolean => {
	return error instanceof DOMException && error.name === 'InvalidStateError';
};

const missingPaintRecordMessage =
	'HtmlInCanvas: Expected the element to be inside the viewport during rendering, but Chrome had no cached paint record for it.';

type HtmlInCanvasPaintTarget = HTMLCanvasElement | OffscreenCanvas;

const resizePaintTarget = ({
	target,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Omit pixelDensity entirely if you want the default (1), rather than passing 0.
2. Validate devicePixelRatio: `const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;` then pass `pixelDensity={dpr}`.
3. Clamp the value: `pixelDensity={Math.max(0.0001, Math.min(4, value))}` if it comes from user input.
4. Ensure pixelDensity is a finite number literal like 2 for retina.

Example fix

// before
<HtmlInCanvas width={1920} height={1080} pixelDensity={window.devicePixelRatio /* undefined in SSR */}>...</HtmlInCanvas>
// after
const dpr = typeof window !== 'undefined' ? window.devicePixelRatio ?? 1 : 1;
<HtmlInCanvas width={1920} height={1080} pixelDensity={dpr}>...</HtmlInCanvas>

const dpr = typeof window !== 'undefined' ? window.devicePixelRatio ?? 1 : 1;
if (!Number.isFinite(dpr) || dpr <= 0) {
  throw new RangeError(`Invalid pixelDensity: ${dpr}`);
}

const isPositiveFinite = (n: unknown): n is number =>
  typeof n === 'number' && Number.isFinite(n) && n > 0;

When it happens

Trigger: Passing `pixelDensity={0}`, `pixelDensity={-1}`, `pixelDensity={Infinity}`, or `pixelDensity={NaN}` to <HtmlInCanvas>; computing pixelDensity from devicePixelRatio when window.devicePixelRatio is undefined.

Common situations: Trying to scale for retina by reading `window.devicePixelRatio` in a server/SSR context; passing a multiplier expression that divides by zero; defaulting pixelDensity to 0 to mean 'off'.

Related errors

• HtmlInCanvas: `width` must be a positive integer. Received:
• HtmlInCanvas: `height` must be a positive integer. Received:
• inputRange must contain only finite numbers, but got [${arr.
• HtmlInCanvas: `width` and `height` must be numbers. Received
• durationInFrames must be positive, but got ${durationInFrame

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