{"record":{"id":"03647c316e508317","repo":"remotion-dev/remotion","slug":"the-display-canvas-would-be-displaywidth-disp","errorCode":null,"errorMessage":"The display canvas would be ${displayWidth}×${displayHeight} pixels; its maximum side is ${maxCanvasDimension.toLocaleString()} pixels.","messagePattern":"The display canvas would be (.+?)×(.+?) pixels; its maximum side is (.+?) pixels\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/canvas-capture-extension/src/capture.ts","lineNumber":100,"sourceCode":"}) => {\n\tconst resolvedCrop = resolveCrop(crop, width, height) ?? {\n\t\tleft: 0,\n\t\ttop: 0,\n\t\twidth,\n\t\theight,\n\t};\n\tconst displayWidth = Math.max(1, Math.round(width * window.devicePixelRatio));\n\tconst displayHeight = Math.max(\n\t\t1,\n\t\tMath.round(height * window.devicePixelRatio),\n\t);\n\tconst outputSize = getScaledCanvasSize(\n\t\tresolvedCrop.width,\n\t\tresolvedCrop.height,\n\t\tscale,\n\t);\n\tif (displayWidth > maxCanvasDimension || displayHeight > maxCanvasDimension) {\n\t\tthrow new Error(\n\t\t\t`The display canvas would be ${displayWidth}×${displayHeight} pixels; its maximum side is ${maxCanvasDimension.toLocaleString()} pixels.`,\n\t\t);\n\t}\n\n\tif (\n\t\toutputSize.width > maxEncodedDimension ||\n\t\toutputSize.height > maxEncodedDimension\n\t) {\n\t\tthrow new Error(\n\t\t\t`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.`,\n\t\t);\n\t}\n\n\treturn outputSize;\n};\n\nexport const getCapturePreflight = ({\n\tscale,","sourceCodeStart":82,"sourceCodeEnd":118,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/canvas-capture-extension/src/capture.ts#L82-L118","documentation":"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.","triggerScenarios":"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.","commonSituations":"Retina displays with DPR >= 2; full-page captures of long pages; high-resolution external monitors; browser zoom > 100% increasing effective size.","solutions":["Crop the capture to a smaller region instead of capturing the whole page.","Lower the browser zoom / devicePixelRatio before capturing so display pixels shrink.","Capture a single element rather than the full page.","Switch to a lower-DPR display or override devicePixelRatio if the platform allows."],"exampleFix":"// before\ngetCapturePreflight({scale: 2, crop: null}); // whole 4K page -> display canvas too large\n\n// after\ngetCapturePreflight({scale: 2, crop: {left: 0, top: 0, width: 1280, height: 720}});","handlingStrategy":"validation","validationCode":"// Mirror validateCaptureSize before opening the capture UI\nconst MAX_CANVAS = 32767; // use the platform's reported max canvas size\nconst displayFits = (width: number, height: number, dpr = window.devicePixelRatio) =>\n  Math.round(width * dpr) <= MAX_CANVAS && Math.round(height * dpr) <= MAX_CANVAS;\nif (!displayFits(pageWidth, pageHeight)) {\n  // force a crop or lower DPR before capture\n}","typeGuard":null,"tryCatchPattern":"try {\n  getCapturePreflight({scale, crop});\n} catch (err) {\n  if (String(err?.message ?? '').startsWith('The display canvas would be')) {\n    // suggest cropping or lowering page zoom, then retry\n  } else throw err;\n}","preventionTips":["Default to capturing a cropped region rather than the full page on large/DPR>=2 displays.","Lower browser zoom before full-page captures.","Surface the platform max canvas size to the user so they can pick a valid crop.","Account for window.devicePixelRatio when estimating display size."],"tags":["canvas-capture","canvas","size-limits","device-pixel-ratio"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}