{"record":{"id":"7d15611c85508a5f","repo":"remotion-dev/remotion","slug":"htmlincanvas-height-must-be-a-positive-integer","errorCode":null,"errorMessage":"HtmlInCanvas: `height` must be a positive integer. Received: ${String(height)}.","messagePattern":"HtmlInCanvas: `height` must be a positive integer\\. Received: (.+?)\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/HtmlInCanvas.tsx","lineNumber":263,"sourceCode":") => HtmlInCanvasOnInitCleanup | Promise<HtmlInCanvasOnInitCleanup>;\n\nexport type HtmlInCanvasPixelDensity = number;\n\nfunction assertHtmlInCanvasDimensions(width: unknown, height: unknown): void {\n\tif (typeof width !== 'number' || typeof height !== 'number') {\n\t\tthrow new Error(\n\t\t\t`HtmlInCanvas: \\`width\\` and \\`height\\` must be numbers. Received width=${String(width)}, height=${String(height)}.`,\n\t\t);\n\t}\n\n\tif (!Number.isInteger(width) || width <= 0) {\n\t\tthrow new Error(\n\t\t\t`HtmlInCanvas: \\`width\\` must be a positive integer. Received: ${String(width)}.`,\n\t\t);\n\t}\n\n\tif (!Number.isInteger(height) || height <= 0) {\n\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(","sourceCodeStart":245,"sourceCodeEnd":281,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/HtmlInCanvas.tsx#L245-L281","documentation":"Thrown by assertHtmlInCanvasDimensions when `height` is a number but fails the positive-integer check (zero, negative, fractional, NaN). Symmetric to the width check, it guarantees the canvas backing store has a valid pixel height before allocation.","triggerScenarios":"Passing `height={0}`, `height={-100}`, `height={1080.25}`, or `height={NaN}` to <HtmlInCanvas>; deriving height from a measurement that returns 0 initially.","commonSituations":"Responsive layouts where height collapses to 0 during transitions; floats from sub-pixel measurements; defaulting height to 0 before data loads.","solutions":["Round and floor-clamp: `Math.max(1, Math.round(value))`.","Defer mounting until height is known: `{h > 0 && <HtmlInCanvas height={h} ... />}`.","Do not animate height through zero; toggle visibility instead.","Verify the source of the value returns integers, not sub-pixel floats."],"exampleFix":"// before\n<HtmlInCanvas width={1920} height={state.loaded ? state.h : 0}>...</HtmlInCanvas>\n// after\n{state.loaded && <HtmlInCanvas width={1920} height={Math.max(1, Math.round(state.h))}>...</HtmlInCanvas>}","handlingStrategy":"validation","validationCode":"if (!Number.isInteger(height) || height <= 0) {\n  throw new RangeError(`height must be a positive integer; got ${height}`);\n}","typeGuard":"const isPositiveInt = (n: unknown): n is number =>\n  typeof n === 'number' && Number.isInteger(n) && n > 0;","tryCatchPattern":null,"preventionTips":["Round dynamic heights with `Math.max(1, Math.round(value))`.","Mount <HtmlInCanvas> only once you have a non-zero measured height.","Never animate height through zero; toggle visibility instead.","Verify your measurement source returns integers."],"tags":["html-in-canvas","validation","dimensions","math"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}