{"record":{"id":"9aa1e4da4543ec93","repo":"remotion-dev/remotion","slug":"the-required-html-in-canvas-apis-are-unavailable","errorCode":null,"errorMessage":"The required HTML-in-canvas APIs are unavailable. Open chrome://flags/#canvas-draw-element, set Canvas Draw Element to Enabled, then fully quit and reopen the browser.","messagePattern":"The required HTML-in-canvas APIs are unavailable\\. Open chrome://flags/#canvas-draw-element, set Canvas Draw Element to Enabled, then fully quit and reopen the browser\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/canvas-capture-extension/src/capture.ts","lineNumber":249,"sourceCode":"\t\tthis.#scale = scale;\n\t\tthis.#format = format;\n\t\tthis.#crop = crop;\n\t\tthis.#matteColors = [\n\t\t\t'#fff',\n\t\t\twindow.getComputedStyle(document.documentElement).backgroundColor,\n\t\t\twindow.getComputedStyle(document.body).backgroundColor,\n\t\t];\n\t\tthis.#wrapped = wrapWholePage();\n\t\tconst context = this.#wrapped.canvas.getContext(\n\t\t\t'2d',\n\t\t) as HtmlInCanvasRenderingContext2D | null;\n\t\tif (\n\t\t\t!context ||\n\t\t\ttypeof context.drawElementImage !== 'function' ||\n\t\t\ttypeof this.#wrapped.canvas.captureElementImage !== 'function'\n\t\t) {\n\t\t\tthis.#wrapped.restore();\n\t\t\tthrow new Error(\n\t\t\t\t'The required HTML-in-canvas APIs are unavailable. Open chrome://flags/#canvas-draw-element, set Canvas Draw Element to Enabled, then fully quit and reopen the browser.',\n\t\t\t);\n\t\t}\n\n\t\tthis.#context = context;\n\t\tthis.#captureCanvas = new OffscreenCanvas(2, 2);\n\t\tconst captureContext = this.#captureCanvas.getContext(\n\t\t\t'2d',\n\t\t) as HtmlInCanvasOffscreenRenderingContext2D | null;\n\t\tif (\n\t\t\t!captureContext ||\n\t\t\ttypeof captureContext.drawElementImage !== 'function'\n\t\t) {\n\t\t\tthis.#wrapped.restore();\n\t\t\tthrow new Error(\n\t\t\t\t'Could not create an HTML-in-canvas OffscreenCanvas 2D context.',\n\t\t\t);\n\t\t}","sourceCodeStart":231,"sourceCodeEnd":267,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/canvas-capture-extension/src/capture.ts#L231-L267","documentation":"The Canvas Capture extension needs the experimental `Canvas Draw Element` Chrome feature, which provides `context.drawElementImage` and `canvas.captureElementImage`. After obtaining a 2D context for the wrapped whole-page canvas, the code checks that both the context exists and that `drawElementImage`/`captureElementImage` are present as functions. If the flag is disabled (or the browser lacks the API), capture setup aborts and the wrapped page is restored before throwing.","triggerScenarios":"Starting a canvas capture in a Chrome build where `chrome://flags/#canvas-draw-element` is set to Disabled or Default, or in a non-Chromium browser that does not implement the HTML-in-canvas APIs. The check runs at `CaptureSession` construction right after `wrapWholePage()`.","commonSituations":"Using a stock Chrome stable build without enabling the flag; Chrome was updated and reset the flag to default; running in a browser that never shipped `canvas.captureElementImage`; not fully quitting/reopening Chrome after toggling the flag.","solutions":["Navigate to chrome://flags/#canvas-draw-element, set it to Enabled, then fully quit and reopen Chrome.","Use Chrome Canary or the pinned Chrome for Testing build required by the extension (see install-canvas-capture-browser skill).","Confirm the browser is Chromium-based and recent enough to ship `HTMLCanvasElement.prototype.captureElementImage`.","Restart the browser completely (quit all windows/processes) after enabling the flag."],"exampleFix":null,"handlingStrategy":"validation","validationCode":"function supportsHtmlInCanvas(canvas: HTMLCanvasElement): boolean {\n  const ctx = canvas.getContext('2d') as any;\n  return !!ctx && typeof ctx.drawElementImage === 'function'\n    && typeof canvas.captureElementImage === 'function';\n}","typeGuard":"const hasDrawElementImage = (c: HTMLCanvasElement): boolean =>\n  typeof (c as any).captureElementImage === 'function';","tryCatchPattern":"try {\n  session = new CaptureSession(/*...*/);\n} catch (e) {\n  if (e instanceof Error && /HTML-in-canvas APIs are unavailable/.test(e.message)) {\n    showEnableFlagInstructions();\n  }\n  throw e;\n}","preventionTips":["Check the flag is enabled before invoking capture.","Use a supported Chrome build (Chrome for Testing pinned version).","Fully restart Chrome after toggling the flag."],"tags":["canvas-capture","chrome-flags","browser-support","experimental-api"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}