tonhowtf/omniget · error · Error

canvas 2d ctx null

Error message

canvas 2d ctx null

What it means

Guard in captureScreenshot: canvas.getContext('2d') returned null, meaning the browser refused to create a 2D rendering context (typically resource exhaustion or an unusable canvas size), so the video frame cannot be drawn and exported.

Solutions

  1. Retry after freeing GPU/memory resources (close other tabs or heavy media sessions)
  2. Cap canvas dimensions to a reasonable maximum before requesting the context
  3. Fall back to an offscreen canvas or a library-based frame capture if the 2D context is unavailable
Defensive patterns

Strategy: type-guard

When it happens

Trigger: Thrown at src/routes/study/course/[id]/lesson/[lid]/+page.svelte:828 when the library encounters an invalid state.

Common situations: See trigger scenarios.


AI-assisted analysis of tonhowtf/omniget@8600b91f42 (2026-09-12). Data as JSON: /api/errors/0514307a55a6bada. Report an issue: GitHub.

Appendix: source

Thrown at src/routes/study/course/[id]/lesson/[lid]/+page.svelte:828

    return s
      .replace(/[\/\\:*?"<>|]/g, "_")
      .replace(/\s+/g, "_")
      .slice(0, 60);
  }

  async function captureScreenshot() {
    if (!videoRef || !lesson) return;
    if (!videoRef.videoWidth || !videoRef.videoHeight) {
      screenshotToast = "Vídeo ainda não carregou";
      setTimeout(() => (screenshotToast = ""), 2400);
      return;
    }
    try {
      const canvas = document.createElement("canvas");
      canvas.width = videoRef.videoWidth;
      canvas.height = videoRef.videoHeight;
      const ctx = canvas.getContext("2d");
      if (!ctx) throw new Error("canvas 2d ctx null");
      ctx.drawImage(videoRef, 0, 0, canvas.width, canvas.height);
      const blob: Blob = await new Promise((resolve, reject) => {
        canvas.toBlob(
          (b) => (b ? resolve(b) : reject(new Error("toBlob null"))),
          "image/png",
        );
      });
      const ts = fmtTimestamp(videoRef.currentTime);
      const filename = `${safeForFilename(lesson.title || "aula")}-${ts}.png`;
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      setTimeout(() => URL.revokeObjectURL(url), 1000);
      screenshotToast = `Screenshot salva (${ts})`;

View on GitHub (pinned to 8600b91f42)