{"record":{"id":"14af37158cdf208b","repo":"remotion-dev/remotion","slug":"htmlincanvas-pixeldensity-must-be-a-positive-fi","errorCode":null,"errorMessage":"HtmlInCanvas: `pixelDensity` must be a positive finite number. Received: ${String(pixelDensity)}.","messagePattern":"HtmlInCanvas: `pixelDensity` must be a positive finite number\\. Received: (.+?)\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/HtmlInCanvas.tsx","lineNumber":281,"sourceCode":"\t\tthrow new Error(\n\t\t\t`HtmlInCanvas: \\`height\\` must be a positive integer. Received: ${String(height)}.`,\n\t\t);\n\t}\n}\n\nfunction resolveHtmlInCanvasPixelDensity(\n\tpixelDensity: HtmlInCanvasPixelDensity | undefined,\n): number {\n\tif (pixelDensity === undefined) {\n\t\treturn 1;\n\t}\n\n\tif (\n\t\ttypeof pixelDensity !== 'number' ||\n\t\t!Number.isFinite(pixelDensity) ||\n\t\tpixelDensity <= 0\n\t) {\n\t\tthrow new Error(\n\t\t\t`HtmlInCanvas: \\`pixelDensity\\` must be a positive finite number. Received: ${String(pixelDensity)}.`,\n\t\t);\n\t}\n\n\treturn pixelDensity;\n}\n\nconst isMissingPaintRecordError = (error: unknown): boolean => {\n\treturn error instanceof DOMException && error.name === 'InvalidStateError';\n};\n\nconst missingPaintRecordMessage =\n\t'HtmlInCanvas: Expected the element to be inside the viewport during rendering, but Chrome had no cached paint record for it.';\n\ntype HtmlInCanvasPaintTarget = HTMLCanvasElement | OffscreenCanvas;\n\nconst resizePaintTarget = ({\n\ttarget,","sourceCodeStart":263,"sourceCodeEnd":299,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/HtmlInCanvas.tsx#L263-L299","documentation":"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.","triggerScenarios":"Passing `pixelDensity={0}`, `pixelDensity={-1}`, `pixelDensity={Infinity}`, or `pixelDensity={NaN}` to <HtmlInCanvas>; computing pixelDensity from devicePixelRatio when window.devicePixelRatio is undefined.","commonSituations":"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'.","solutions":["Omit pixelDensity entirely if you want the default (1), rather than passing 0.","Validate devicePixelRatio: `const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;` then pass `pixelDensity={dpr}`.","Clamp the value: `pixelDensity={Math.max(0.0001, Math.min(4, value))}` if it comes from user input.","Ensure pixelDensity is a finite number literal like 2 for retina."],"exampleFix":"// before\n<HtmlInCanvas width={1920} height={1080} pixelDensity={window.devicePixelRatio /* undefined in SSR */}>...</HtmlInCanvas>\n// after\nconst dpr = typeof window !== 'undefined' ? window.devicePixelRatio ?? 1 : 1;\n<HtmlInCanvas width={1920} height={1080} pixelDensity={dpr}>...</HtmlInCanvas>","handlingStrategy":"validation","validationCode":"const dpr = typeof window !== 'undefined' ? window.devicePixelRatio ?? 1 : 1;\nif (!Number.isFinite(dpr) || dpr <= 0) {\n  throw new RangeError(`Invalid pixelDensity: ${dpr}`);\n}","typeGuard":"const isPositiveFinite = (n: unknown): n is number =>\n  typeof n === 'number' && Number.isFinite(n) && n > 0;","tryCatchPattern":null,"preventionTips":["Default pixelDensity to 1 by omitting it when in doubt.","Always coalesce devicePixelRatio: `window.devicePixelRatio ?? 1`.","Clamp user-supplied multipliers to a sane range like [0.5, 4].","Avoid SSR-only code paths that read window globals unguarded."],"tags":["html-in-canvas","validation","math","ssr"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}