{"record":{"id":"4faec92472585762","repo":"remotion-dev/remotion","slug":"could-not-create-an-html-in-canvas-offscreencanvas","errorCode":null,"errorMessage":"Could not create an HTML-in-canvas OffscreenCanvas 2D context.","messagePattern":"Could not create an HTML-in-canvas OffscreenCanvas 2D context\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/canvas-capture-extension/src/capture.ts","lineNumber":264,"sourceCode":"\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}\n\n\t\tthis.#captureContext = captureContext;\n\t\ttry {\n\t\t\tconst sourceSize = this.#wrapped.getSize();\n\t\t\tthis.#assertValidSize(sourceSize.width, sourceSize.height);\n\t\t\tsyncDisplayCanvasSize(\n\t\t\t\tthis.#wrapped.canvas,\n\t\t\t\tsourceSize.width,\n\t\t\t\tsourceSize.height,\n\t\t\t\twindow.devicePixelRatio,\n\t\t\t);\n\t\t\tconst initialCrop = this.#resolveCrop(\n\t\t\t\tsourceSize.width,\n\t\t\t\tsourceSize.height,\n\t\t\t) ?? {left: 0, top: 0, ...sourceSize};","sourceCodeStart":246,"sourceCodeEnd":282,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/canvas-capture-extension/src/capture.ts#L246-L282","documentation":"After the main whole-page 2D context is validated, the recorder creates a small `OffscreenCanvas(2, 2)` for intermediate capture and fetches its 2D context, again requiring `drawElementImage` to be a function. If the OffscreenCanvas 2D context is null or lacks `drawElementImage`, the wrapped page is restored and the error is thrown. This is a secondary capability check distinct from the main-canvas check.","triggerScenarios":"The browser supports `drawElementImage` on a regular `HTMLCanvasElement` 2D context but not on an `OffscreenCanvas` 2D context (partial/experimental implementation). Also thrown if `OffscreenCanvas.getContext('2d')` returns null because the context is lost or unavailable.","commonSituations":"A Chrome version where the `Canvas Draw Element` flag enables the API for on-screen canvases but OffscreenCanvas support is missing; hardware/resource limits causing OffscreenCanvas 2D context allocation to fail; running in a worker context without OffscreenCanvas 2D support.","solutions":["Update to a Chrome build that supports `drawElementImage` on OffscreenCanvas 2D contexts (newer Chrome Canary).","Ensure the `Canvas Draw Element` flag is enabled (chrome://flags/#canvas-draw-element) and restart Chrome.","Free GPU resources / close other tabs if the OffscreenCanvas context is failing to allocate.","If unresolved, report the browser version — this indicates an incomplete platform implementation."],"exampleFix":null,"handlingStrategy":"validation","validationCode":"function supportsOffscreenDrawElement(): boolean {\n  try {\n    const oc = new OffscreenCanvas(2, 2);\n    const ctx = oc.getContext('2d') as any;\n    return !!ctx && typeof ctx.drawElementImage === 'function';\n  } catch {\n    return false;\n  }\n}","typeGuard":"const hasOffscreenDrawElementImage = (): boolean => {\n  const ctx = new OffscreenCanvas(1,1).getContext('2d') as any;\n  return !!ctx && typeof ctx.drawElementImage === 'function';\n};","tryCatchPattern":"try {\n  await session.start();\n} catch (e) {\n  if (e instanceof Error && /OffscreenCanvas 2D context/.test(e.message)) {\n    adviseBrowserUpgrade();\n  }\n  throw e;\n}","preventionTips":["Probe OffscreenCanvas drawElementImage support before starting capture.","Keep Chrome (Canary/For-Testing) up to date.","Free GPU resources before heavy capture sessions."],"tags":["canvas-capture","offscreencanvas","browser-support","experimental-api"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}