diff --git a/apps/example/e2e/web.spec.ts b/apps/example/e2e/web.spec.ts
index 7d208a2529..395b5cf656 100644
--- a/apps/example/e2e/web.spec.ts
+++ b/apps/example/e2e/web.spec.ts
@@ -78,3 +78,69 @@ for (const name of screens) {
     ).toEqual([]);
   });
 }
+
+// The WebGL context behind a <Canvas> belongs to the <canvas> element, the
+// renderer to a layout effect, and the two lifetimes don't line up (#3976,
+// #3349). The WebGLLifecycle screen exercises every way they can diverge;
+// the reference canvas on it must keep a healthy context throughout.
+test("WebGLLifecycle: context lifetime", async ({ page }) => {
+  const errors: string[] = [];
+  page.on("pageerror", (error) => errors.push(error.stack ?? error.message));
+  // Chrome reports evictions as a browser-generated console warning:
+  // "WARNING: Too many active WebGL contexts. Oldest context will be lost."
+  const evictions: string[] = [];
+  page.on("console", (message) => {
+    if (/WebGL contexts/i.test(message.text())) {
+      evictions.push(message.text());
+    }
+  });
+  await page.goto("/api/webgl-lifecycle");
+  const status = page.getByTestId("status");
+  const reference = page.getByTestId("reference").locator("canvas");
+  await expect(reference).toBeVisible({ timeout: 60_000 });
+  await expect(status).toContainText("reference: ok");
+
+  // Mounting and unmounting a canvas more times than the browser's context
+  // limit: each unmounted canvas must release its context right away, or the
+  // browser evicts the oldest live one, which is the reference canvas.
+  await page.getByTestId("remount").click();
+  await expect(status).toContainText("cycles 20/20", { timeout: 30_000 });
+  // Chrome's eviction runs on a timer after the context count is exceeded.
+  await page.waitForTimeout(500);
+  await expect(status).toContainText("reference: ok");
+  expect(evictions).toEqual([]);
+
+  // StrictMode re-runs the renderer's layout effect on the same element.
+  await page.getByTestId("strict").click();
+  await expect(status).toContainText("strict: on");
+  await expect(reference).toBeVisible();
+  await expect(status).toContainText("reference: ok");
+
+  // The browser can take the context away and hand it back; the renderer
+  // must pick it up again.
+  await page.getByTestId("lose").click();
+  await expect(status).toContainText("reference: LOST");
+  await page.getByTestId("restore").click();
+  await expect(status).toContainText("reference: ok");
+  expect(
+    await reference.evaluate((canvas: HTMLCanvasElement) => {
+      // A restored context has a fresh drawing buffer: the renderer must have
+      // resized it (and hence rebuilt its surface) rather than left it empty.
+      return canvas.width > 0 && canvas.height > 0;
+    })
+  ).toBe(true);
+
+  // Live -> static -> live: each renderer kind needs its own element.
+  await page.getByTestId("renderer").click();
+  await expect(status).toContainText("renderer: static");
+  await expect(reference).toBeVisible();
+  await page.getByTestId("renderer").click();
+  await expect(status).toContainText("renderer: live");
+  await expect(status).toContainText("reference: ok");
+
+  await page.screenshot({
+    path: path.join(screenshotsDir, "WebGLLifecycle-actions.png"),
+  });
+  await expect(status).not.toContainText("error:");
+  expect(errors, errors.join("\n")).toEqual([]);
+});
diff --git a/apps/example/src/Examples/API/Routes.ts b/apps/example/src/Examples/API/Routes.ts
index e69add788b..3b42e7f5dc 100644
--- a/apps/example/src/Examples/API/Routes.ts
+++ b/apps/example/src/Examples/API/Routes.ts
@@ -42,5 +42,6 @@ export type Routes = {
   Web: undefined;
   WebLayout: undefined;
   WebGLContexts: undefined;
+  WebGLLifecycle: undefined;
   WebMemory: undefined;
 };
diff --git a/apps/example/src/Examples/API/Web.tsx b/apps/example/src/Examples/API/Web.tsx
index e644757552..d920697631 100644
--- a/apps/example/src/Examples/API/Web.tsx
+++ b/apps/example/src/Examples/API/Web.tsx
@@ -14,6 +14,10 @@ const examples = [
     screen: "WebGLContexts",
     title: "🔥 WebGL Contexts",
   },
+  {
+    screen: "WebGLLifecycle",
+    title: "♻️ WebGL Lifecycle",
+  },
   {
     screen: "WebMemory",
     title: "💧 WASM Memory",
diff --git a/apps/example/src/Examples/API/WebGLLifecycle.tsx b/apps/example/src/Examples/API/WebGLLifecycle.tsx
new file mode 100644
index 0000000000..29eaac22c5
--- /dev/null
+++ b/apps/example/src/Examples/API/WebGLLifecycle.tsx
@@ -0,0 +1,267 @@
+import React, {
+  Component,
+  StrictMode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import type { ReactNode } from "react";
+import {
+  Button,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+import { Canvas, Circle, Fill } from "@shopify/react-native-skia";
+import {
+  Easing,
+  useDerivedValue,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+
+// Exercises the lifetime of the WebGL context behind a <Canvas> on web.
+// The context belongs to the <canvas> element while the renderer belongs to
+// a layout effect, and the two don't line up:
+// - StrictMode (DEV) re-runs the layout effect on the same element (#3976):
+//   losing the context on cleanup left the canvas blank for good and made
+//   CanvasKit fault inside wasm on the next construction.
+// - A canvas that really unmounts must lose its context right away, since a
+//   detached canvas keeps it alive until garbage collection and browsers cap
+//   the number of live contexts (16 in Chrome, which then evicts the oldest,
+//   visible or not) (#3349).
+// - A context the browser evicted has to be picked up again once restored.
+// - Switching between the live and the static renderer needs a fresh
+//   element, as an element is bound to one context kind for life.
+// Every action below reports on the status line; on native they are no-ops.
+
+const SIZE = 200;
+const CHURN_CYCLES = 20;
+
+const isWeb = Platform.OS === "web" && typeof document !== "undefined";
+
+const referenceCanvas = () =>
+  isWeb
+    ? document.querySelector<HTMLCanvasElement>(
+        '[data-testid="reference"] canvas'
+      )
+    : null;
+
+const Spinner = () => {
+  const clock = useSharedValue(0);
+  useEffect(() => {
+    clock.value = withRepeat(
+      withTiming(1, { duration: 2000, easing: Easing.linear }),
+      -1
+    );
+  }, [clock]);
+  const cx = useDerivedValue(
+    () => SIZE / 2 + (SIZE / 3) * Math.cos(clock.value * Math.PI * 2)
+  );
+  const cy = useDerivedValue(
+    () => SIZE / 2 + (SIZE / 3) * Math.sin(clock.value * Math.PI * 2)
+  );
+  return (
+    <>
+      <Fill color="#1c2541" />
+      <Circle cx={cx} cy={cy} r={SIZE / 10} color="#5bc0be" />
+    </>
+  );
+};
+
+interface BoundaryProps {
+  children: ReactNode;
+  onError: (message: string) => void;
+}
+
+// Renderer failures throw from the layout effect that builds it, which would
+// otherwise take the whole app down.
+class Boundary extends Component<BoundaryProps, { failed: boolean }> {
+  state = { failed: false };
+
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+
+  componentDidCatch(error: Error) {
+    this.props.onError(error.message);
+  }
+
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+}
+
+export const WebGLLifecycle = () => {
+  const [strict, setStrict] = useState(false);
+  const [isStatic, setIsStatic] = useState(false);
+  const [churnMounted, setChurnMounted] = useState(false);
+  const [cycle, setCycle] = useState(0);
+  const [contextState, setContextState] = useState("unknown");
+  const [error, setError] = useState<string | null>(null);
+  const loseContextRef = useRef<{
+    loseContext(): void;
+    restoreContext(): void;
+  } | null>(null);
+
+  // Poll the reference canvas: a lost context is what an evicted or
+  // unrestored canvas looks like from the outside.
+  useEffect(() => {
+    if (!isWeb) {
+      return undefined;
+    }
+    const tick = () => {
+      const canvas = referenceCanvas();
+      if (!canvas) {
+        setContextState("no canvas");
+        return;
+      }
+      if (isStatic) {
+        setContextState("static");
+        return;
+      }
+      const gl = canvas.getContext("webgl2");
+      if (!gl) {
+        setContextState("none");
+      } else {
+        setContextState(gl.isContextLost() ? "LOST" : "ok");
+      }
+    };
+    tick();
+    const interval = setInterval(tick, 250);
+    return () => clearInterval(interval);
+  }, [isStatic, strict]);
+
+  const remount = () => {
+    setError(null);
+    setCycle(0);
+    let i = 0;
+    const step = () => {
+      setChurnMounted(true);
+      setTimeout(() => {
+        setChurnMounted(false);
+        i++;
+        setCycle(i);
+        if (i < CHURN_CYCLES) {
+          setTimeout(step, 50);
+        }
+      }, 50);
+    };
+    step();
+  };
+
+  const lose = () => {
+    const gl = referenceCanvas()?.getContext("webgl2");
+    // The extension object has to be obtained while the context is healthy:
+    // getExtension() returns null on a lost context.
+    loseContextRef.current = gl?.getExtension("WEBGL_lose_context") ?? null;
+    loseContextRef.current?.loseContext();
+  };
+
+  const restore = () => {
+    loseContextRef.current?.restoreContext();
+  };
+
+  const reference = (
+    <Boundary onError={setError}>
+      <Canvas style={styles.canvas} __destroyWebGLContextAfterRender={isStatic}>
+        <Spinner />
+      </Canvas>
+    </Boundary>
+  );
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <Text style={styles.header}>WebGL context lifecycle</Text>
+      <Text style={styles.description}>
+        The reference canvas below must keep spinning through every action. Web
+        only.
+      </Text>
+      <Text style={styles.status} testID="status">
+        {`cycles ${cycle}/${CHURN_CYCLES} · reference: ${contextState}` +
+          ` · strict: ${strict ? "on" : "off"}` +
+          ` · renderer: ${isStatic ? "static" : "live"}` +
+          (error ? ` · error: ${error}` : "")}
+      </Text>
+      <View style={styles.row}>
+        <View testID="reference">
+          {strict ? (
+            <StrictMode key="strict">{reference}</StrictMode>
+          ) : (
+            reference
+          )}
+        </View>
+        <View testID="churn" style={styles.canvas}>
+          {churnMounted && (
+            <Boundary onError={setError}>
+              <Canvas style={styles.canvas}>
+                <Fill color={`hsl(${(cycle * 47) % 360}, 70%, 50%)`} />
+              </Canvas>
+            </Boundary>
+          )}
+        </View>
+      </View>
+      <View style={styles.actions}>
+        <Button
+          testID="remount"
+          title={`Mount & unmount a canvas ${CHURN_CYCLES}×`}
+          onPress={remount}
+        />
+        <Button
+          testID="strict"
+          title={strict ? "StrictMode: on" : "StrictMode: off"}
+          onPress={() => setStrict((s) => !s)}
+        />
+        <Button testID="lose" title="Lose context" onPress={lose} />
+        <Button testID="restore" title="Restore context" onPress={restore} />
+        <Button
+          testID="renderer"
+          title={isStatic ? "Renderer: static" : "Renderer: live"}
+          onPress={() => setIsStatic((s) => !s)}
+        />
+      </View>
+      <Text style={styles.description}>
+        Mount & unmount: more cycles than the browser's context limit; the
+        reference canvas must not be evicted (Chrome logs "Too many active WebGL
+        contexts" when it is). StrictMode: re-runs the renderer on the same
+        element; the canvas must keep painting. Lose then restore: the canvas
+        goes blank, then resumes. Renderer: switches between the live and the
+        static renderer; both must paint.
+      </Text>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    gap: 12,
+  },
+  header: {
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+  description: {
+    fontSize: 13,
+    color: "#666",
+  },
+  status: {
+    fontSize: 13,
+    fontFamily: Platform.select({ web: "monospace", default: undefined }),
+  },
+  row: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  actions: {
+    gap: 8,
+    alignItems: "flex-start",
+  },
+  canvas: {
+    width: SIZE,
+    height: SIZE,
+  },
+});
diff --git a/apps/example/src/Examples/API/index.tsx b/apps/example/src/Examples/API/index.tsx
index 6f10aa05f8..72f26fa984 100644
--- a/apps/example/src/Examples/API/index.tsx
+++ b/apps/example/src/Examples/API/index.tsx
@@ -45,6 +45,7 @@ import { AtlasExample } from "./AtlasExample";
 import { Web } from "./Web";
 import { WebLayout } from "./WebLayout";
 import { WebGLContexts } from "./WebGLContexts";
+import { WebGLLifecycle } from "./WebGLLifecycle";
 import { WebMemory } from "./WebMemory";
 
 const Stack = createNativeStackNavigator<Routes>();
@@ -354,6 +355,13 @@ export const API = () => {
           title: "🔥 WebGL Contexts",
         }}
       />
+      <Stack.Screen
+        name="WebGLLifecycle"
+        component={WebGLLifecycle}
+        options={{
+          title: "♻️ WebGL Lifecycle",
+        }}
+      />
       <Stack.Screen
         name="WebMemory"
         component={WebMemory}
diff --git a/apps/example/src/Examples/API/linking.ts b/apps/example/src/Examples/API/linking.ts
index 7d541b4fdb..4c98d229b6 100644
--- a/apps/example/src/Examples/API/linking.ts
+++ b/apps/example/src/Examples/API/linking.ts
@@ -47,5 +47,6 @@ export const apiScreenPaths: Record<keyof Routes, string> = {
   Web: "web",
   WebLayout: "web-layout",
   WebGLContexts: "webgl-contexts",
+  WebGLLifecycle: "webgl-lifecycle",
   WebMemory: "web-memory",
 };
diff --git a/packages/skia/src/views/SkiaPictureView.web.tsx b/packages/skia/src/views/SkiaPictureView.web.tsx
index de62406fe8..c5f307929f 100644
--- a/packages/skia/src/views/SkiaPictureView.web.tsx
+++ b/packages/skia/src/views/SkiaPictureView.web.tsx
@@ -36,32 +36,191 @@ interface Renderer {
   dispose(): void;
 }
 
+// A <canvas> element owns at most one WebGL context for its whole lifetime.
+// A renderer, on the other hand, lives as long as the layout effect that
+// creates it, which is shorter: React re-runs layout effects on a *preserved*
+// host node under StrictMode's DEV double-invoke and when an Activity/offscreen
+// subtree is hidden and revealed (#3976). What belongs to the element rather
+// than to a renderer is tracked here, per element:
+// - the context, so that a new renderer can tell whether the element already
+//   has one (and whether it is lost) without calling getContext() itself,
+//   which on a fresh element would create a context with the wrong attributes
+//   (CanvasKit.GetWebGLContext requests its own);
+// - the WEBGL_lose_context extension, captured while the context is healthy:
+//   getExtension() returns null on a lost context, and this object is the only
+//   way to lose a context on purpose or to ask the browser to restore one;
+// - whether the browser has announced the loss of the context yet: a lost
+//   context can only be restored once its webglcontextlost event has been
+//   dispatched, and that event is asynchronous;
+// - the renderer currently attached to the element, if any.
+interface CanvasWebGL {
+  gl: WebGLRenderingContext | WebGL2RenderingContext;
+  // The WEBGL_lose_context extension.
+  loseContext: { loseContext(): void; restoreContext(): void } | null;
+  lossAnnounced: boolean;
+  owner: WebGLRenderer | null;
+}
+const canvasWebGL = new WeakMap<HTMLCanvasElement, CanvasWebGL>();
+
+// Unregisters a context from CanvasKit's registry, which otherwise retains the
+// canvas element (and its detached DOM tree) forever (#3924).
+const deleteContextHandle = (handle: WebGLContextHandle) => {
+  CanvasKit.deleteContext(handle);
+  // Making the now-deleted handle current clears CanvasKit's current-context
+  // globals (GLctx/Module.ctx), which would otherwise keep referencing the
+  // context (and the canvas) until another surface becomes current. With a
+  // deleted handle this is a no-op that returns null without creating
+  // anything.
+  CanvasKit.MakeWebGLContext(handle);
+};
+
 class WebGLRenderer implements Renderer {
   private surface: JsiSkSurface | null = null;
   private grContext: GrDirectContext | null = null;
   private contextHandle: WebGLContextHandle = 0;
   private pd = 1;
+  // Set while the renderer is waiting for a lost context to be restored.
+  private restoreWanted = false;
+  private restoreRequest: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(
+    private canvas: HTMLCanvasElement,
+    // Called when the renderer becomes able to paint again and the current
+    // picture should be drawn.
+    private requestRedraw: () => void
+  ) {
+    const entry = canvasWebGL.get(canvas);
+    if (entry) {
+      entry.owner = this;
+    }
+    canvas.addEventListener("webglcontextlost", this.onContextLost);
+    canvas.addEventListener("webglcontextrestored", this.onContextRestored);
+    this.acquire();
+  }
 
-  constructor(private canvas: HTMLCanvasElement) {
-    this.contextHandle = CanvasKit.GetWebGLContext(canvas);
-    if (!this.contextHandle) {
+  // Builds the GrDirectContext and the surface on the element's WebGL
+  // context, creating the context first if the element has none.
+  private acquire() {
+    const { canvas } = this;
+    const known = canvasWebGL.get(canvas);
+    if (known?.gl.isContextLost()) {
+      // Nothing can be built on a lost context: CanvasKit.GetWebGLContext
+      // happily registers it, and MakeWebGLContext then faults inside wasm
+      // (#3976). Ask the browser for it back and finish in onContextRestored;
+      // if the loss hasn't been announced yet, onContextLost asks.
+      this.restoreWanted = true;
+      if (known.lossAnnounced) {
+        known.loseContext?.restoreContext();
+      }
+      return;
+    }
+    const handle = CanvasKit.GetWebGLContext(canvas);
+    if (!handle) {
       throw new Error("Could not create a WebGL context");
     }
-    this.grContext = CanvasKit.MakeWebGLContext(this.contextHandle);
-    if (!this.grContext) {
-      CanvasKit.deleteContext(this.contextHandle);
-      this.contextHandle = 0;
+    const entry = known ?? this.trackContext();
+    let grContext: GrDirectContext | null = null;
+    try {
+      grContext = CanvasKit.MakeWebGLContext(handle);
+    } finally {
+      if (!grContext) {
+        // Whether it returned null or threw, don't leave the registry
+        // holding on to the canvas.
+        deleteContextHandle(handle);
+      }
+    }
+    if (!grContext) {
       throw new Error("Could not create a graphics context");
     }
-    const ctx = canvas.getContext("webgl2");
-    if (ctx) {
-      ctx.drawingBufferColorSpace = "display-p3";
+    this.restoreWanted = false;
+    this.contextHandle = handle;
+    this.grContext = grContext;
+    if (entry) {
+      entry.gl.drawingBufferColorSpace = "display-p3";
     }
     this.onResize();
   }
 
+  // CanvasKit just created the element's context; asking for it again hands
+  // back the same object (the attributes are only honored the first time).
+  private trackContext(): CanvasWebGL | null {
+    const { canvas } = this;
+    const gl = canvas.getContext("webgl2") ?? canvas.getContext("webgl");
+    if (!gl) {
+      return null;
+    }
+    const entry: CanvasWebGL = {
+      gl,
+      loseContext: gl.getExtension("WEBGL_lose_context"),
+      lossAnnounced: false,
+      owner: this,
+    };
+    canvasWebGL.set(canvas, entry);
+    // Browsers restore a lost context (evicted as the oldest one when the
+    // page exceeds the active-context limit, or lost to a GPU reset) only if
+    // the page called preventDefault() on the webglcontextlost event. A
+    // renderer isn't necessarily attached when that happens (the canvas may
+    // be in a hidden Activity), so these listeners live as long as the
+    // element does. They are registered ahead of any renderer's, and the
+    // loss can't be announced before they exist since the event is
+    // asynchronous.
+    canvas.addEventListener("webglcontextlost", (event) => {
+      event.preventDefault();
+      entry.lossAnnounced = true;
+    });
+    canvas.addEventListener("webglcontextrestored", () => {
+      entry.lossAnnounced = false;
+    });
+    return entry;
+  }
+
+  // Frees everything built on the context. The context itself belongs to the
+  // element, see dispose().
+  private release() {
+    this.surface?.ref.delete();
+    this.surface = null;
+    if (this.grContext) {
+      this.grContext.releaseResourcesAndAbandonContext();
+      this.grContext.delete();
+      this.grContext = null;
+    }
+    if (this.contextHandle) {
+      deleteContextHandle(this.contextHandle);
+      this.contextHandle = 0;
+    }
+  }
+
+  private isContextLost() {
+    return canvasWebGL.get(this.canvas)?.gl.isContextLost() ?? false;
+  }
+
+  private onContextLost = () => {
+    // The browser already dropped every GL object; drop our references to
+    // them. Restoration is left to the browser (it restores an evicted
+    // context as soon as a slot frees up), except when this renderer was
+    // built on an already-lost context and is waiting to paint for the first
+    // time: chasing an eviction from here would evict the next-oldest context
+    // in turn, and with more live canvases than the browser allows the
+    // canvases would endlessly evict each other.
+    this.release();
+    if (this.restoreWanted) {
+      // The permission granted by preventDefault() is only recorded by the
+      // browser once the event dispatch is over: a restoreContext() call
+      // from inside the handler is refused, so ask from a later task.
+      this.restoreRequest = setTimeout(() => {
+        this.restoreRequest = null;
+        canvasWebGL.get(this.canvas)?.loseContext?.restoreContext();
+      }, 0);
+    }
+  };
+
+  private onContextRestored = () => {
+    this.acquire();
+    this.requestRedraw();
+  };
+
   makeImageSnapshot(picture: SkPicture, rect?: SkRect): SkImage | null {
-    if (!this.surface) {
+    if (!this.surface || this.isContextLost()) {
       return null;
     }
     const canvas = this.surface.getCanvas();
@@ -73,7 +232,10 @@ class WebGLRenderer implements Renderer {
 
   onResize() {
     const { canvas } = this;
-    if (!this.grContext) {
+    if (!this.grContext || this.isContextLost()) {
+      // Waiting for the context to be restored (the restore path resizes),
+      // or the loss hasn't been announced yet and onContextLost is about to
+      // release everything: either way there is nothing to build on.
       return;
     }
     this.pd = window.devicePixelRatio;
@@ -101,41 +263,57 @@ class WebGLRenderer implements Renderer {
   }
 
   draw(picture: SkPicture) {
-    if (this.surface) {
-      const canvas = this.surface.getCanvas();
-      canvas.clear(Float32Array.of(0, 0, 0, 0));
-      canvas.save();
-      canvas.scale(this.pd, this.pd);
-      canvas.drawPicture(picture);
-      canvas.restore();
-      this.surface.ref.flush();
+    if (!this.surface || this.isContextLost()) {
+      return;
     }
+    const canvas = this.surface.getCanvas();
+    canvas.clear(Float32Array.of(0, 0, 0, 0));
+    canvas.save();
+    canvas.scale(this.pd, this.pd);
+    canvas.drawPicture(picture);
+    canvas.restore();
+    this.surface.ref.flush();
   }
 
   dispose(): void {
-    this.surface?.ref.delete();
-    this.surface = null;
-    if (this.grContext) {
-      this.grContext.releaseResourcesAndAbandonContext();
-      this.grContext.delete();
-      this.grContext = null;
+    const { canvas } = this;
+    canvas.removeEventListener("webglcontextlost", this.onContextLost);
+    canvas.removeEventListener("webglcontextrestored", this.onContextRestored);
+    if (this.restoreRequest !== null) {
+      clearTimeout(this.restoreRequest);
+      this.restoreRequest = null;
     }
-    this.canvas
-      ?.getContext("webgl2")
-      ?.getExtension("WEBGL_lose_context")
-      ?.loseContext();
-    if (this.contextHandle) {
-      // Unregister the context from CanvasKit's internal registry, otherwise
-      // it retains the canvas element (and its detached DOM tree) forever.
-      CanvasKit.deleteContext(this.contextHandle);
-      // Making the now-deleted handle current clears CanvasKit's
-      // current-context globals (GLctx/Module.ctx), which would otherwise
-      // keep referencing the context (and the canvas) until another surface
-      // becomes current. With a deleted handle this is a no-op that returns
-      // null without creating anything.
-      CanvasKit.MakeWebGLContext(this.contextHandle);
-      this.contextHandle = 0;
+    this.restoreWanted = false;
+    this.release();
+    // Free the drawing buffer, which CanvasKit requests with depth and stencil
+    // attachments (about 8 bytes per pixel): a canvas that stays in the
+    // document without a renderer, hidden in an Activity say, would otherwise
+    // keep a full-size buffer around. The next renderer's onResize() sizes it
+    // again.
+    canvas.width = 0;
+    canvas.height = 0;
+    const entry = canvasWebGL.get(canvas);
+    if (!entry) {
+      return;
     }
+    entry.owner = null;
+    // Whether the element is going away is only known once the commit is
+    // over: on a real unmount React runs this cleanup *before* removing the
+    // node from the document, while StrictMode's double-invoke and an
+    // Activity hide keep the node in place (and the former builds the next
+    // renderer on it right away). Losing the context of a detached element
+    // matters: it would otherwise stay alive until the element is garbage
+    // collected, and browsers cap the number of live contexts per page
+    // (16 in Chrome, which then evicts the oldest one, visible or not).
+    queueMicrotask(() => {
+      if (
+        entry.owner === null &&
+        !canvas.isConnected &&
+        !entry.gl.isContextLost()
+      ) {
+        entry.loseContext?.loseContext();
+      }
+    });
   }
 }
 
@@ -382,6 +560,9 @@ export const SkiaPictureView = (props: SkiaPictureViewProps) => {
   // - A ResizeObserver on the canvas itself recreates the surface and repaints
   //   synchronously (its callbacks run after layout, before paint), and is
   //   also the source of the user-facing onLayout event.
+  // - The renderer belongs to the layout effect, the WebGL context to the
+  //   <canvas> element, whose lifetime is longer; see WebGLRenderer for how
+  //   the two are reconciled.
   const redrawPendingRef = useRef(false);
   const flushScheduledRef = useRef(false);
   const onLayoutRef = useRef(onLayout);
@@ -488,7 +669,7 @@ export const SkiaPictureView = (props: SkiaPictureViewProps) => {
     }
     const renderer = isStatic
       ? new StaticWebGLRenderer(canvas)
-      : new WebGLRenderer(canvas);
+      : new WebGLRenderer(canvas, redraw);
     rendererRef.current = renderer;
 
     const drawPicture = () => {
@@ -572,7 +753,7 @@ export const SkiaPictureView = (props: SkiaPictureViewProps) => {
       rendererRef.current = null;
       renderer.dispose();
     };
-  }, [isStatic]);
+  }, [isStatic, redraw]);
 
   // No flush cancellation is needed on unmount: a microtask queued before
   // unmount runs within the same task, and flushRedraw no-ops once the
@@ -635,6 +816,10 @@ export const SkiaPictureView = (props: SkiaPictureViewProps) => {
   return (
     <Platform.View {...viewProps}>
       <canvas
+        // A canvas element is bound to one context kind for life (WebGL for
+        // the live renderer, 2D for the static one), so switching renderers
+        // needs a fresh element.
+        key={isStatic ? "static" : "webgl"}
         ref={canvasRef}
         style={{ display: "block", width: "100%", height: "100%" }}
       />
diff --git a/packages/skia/src/views/__tests__/SkiaPictureView.web.spec.tsx b/packages/skia/src/views/__tests__/SkiaPictureView.web.spec.tsx
index 6344e69c3b..f32fdeda46 100644
--- a/packages/skia/src/views/__tests__/SkiaPictureView.web.spec.tsx
+++ b/packages/skia/src/views/__tests__/SkiaPictureView.web.spec.tsx
@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 /* global HTMLCanvasElement */
-import React, { act } from "react";
+import React, { act, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 import type { SkPicture } from "../../skia/types";
@@ -46,6 +46,83 @@ class ResizeObserverMock {
 
 const canvasSize = { width: 0, height: 0 };
 
+// A canvas element owns at most one WebGL context for its whole lifetime.
+// The context gets lost either on purpose (WEBGL_lose_context.loseContext())
+// or by the browser (evicting the oldest one past its per-page limit, a GPU
+// reset); either way isContextLost() flips right away while the
+// webglcontextlost event is dispatched asynchronously, and the context is only
+// ever restored, spontaneously or through WEBGL_lose_context.restoreContext(),
+// if that event was preventDefault()ed. getExtension() returns null while the
+// context is lost. See https://registry.khronos.org/webgl/specs/latest/1.0/
+// (section 5.15) and
+// https://registry.khronos.org/webgl/extensions/WEBGL_lose_context/
+class MockWebGLContext {
+  drawingBufferColorSpace = "srgb";
+  lost = false;
+  restoreAllowed = false;
+
+  constructor(readonly canvas: HTMLCanvasElement) {}
+
+  isContextLost() {
+    return this.lost;
+  }
+
+  getExtension(name: string) {
+    if (this.lost || name !== "WEBGL_lose_context") {
+      return null;
+    }
+    return {
+      loseContext: () => this.lose(),
+      restoreContext: () => this.restore(),
+    };
+  }
+
+  lose() {
+    if (this.lost) {
+      return;
+    }
+    this.lost = true;
+    queueMicrotask(() => {
+      const event = new Event("webglcontextlost", { cancelable: true });
+      this.canvas.dispatchEvent(event);
+      this.restoreAllowed = event.defaultPrevented;
+    });
+  }
+
+  restore() {
+    if (!this.lost || !this.restoreAllowed) {
+      // INVALID_OPERATION in a browser: a GL error, not an exception.
+      return;
+    }
+    queueMicrotask(() => {
+      this.lost = false;
+      this.canvas.dispatchEvent(new Event("webglcontextrestored"));
+    });
+  }
+}
+
+const contexts = new WeakMap<HTMLCanvasElement, MockWebGLContext>();
+
+function getContextMock(this: HTMLCanvasElement, kind: string) {
+  if (kind !== "webgl2") {
+    return null;
+  }
+  let ctx = contexts.get(this);
+  if (!ctx) {
+    ctx = new MockWebGLContext(this);
+    contexts.set(this, ctx);
+  }
+  return ctx;
+}
+
+const contextOf = (canvas: HTMLCanvasElement) => {
+  const ctx = contexts.get(canvas);
+  if (!ctx) {
+    throw new Error("The canvas has no WebGL context");
+  }
+  return ctx;
+};
+
 const makeRawCanvas = () => ({
   clear: jest.fn(),
   save: jest.fn(),
@@ -66,17 +143,54 @@ const createCanvasKitMock = () => {
     releaseResourcesAndAbandonContext: jest.fn(),
     delete: jest.fn(),
   };
+  // Emscripten hands out an integer handle per GL context and keeps the
+  // canvas it came from in its registry.
+  const registry = new Map<number, HTMLCanvasElement>();
+  let nextHandle = 1;
   const CanvasKitMock = {
-    GetWebGLContext: jest.fn(() => 1),
-    MakeWebGLContext: jest.fn(() => grContext),
+    // Registers whatever context the canvas already has under a fresh
+    // handle, lost or not (#3976), so the "Could not create a WebGL context"
+    // guard in the renderer never fires for a lost context.
+    GetWebGLContext: jest.fn((canvas: HTMLCanvasElement) => {
+      canvas.getContext("webgl2");
+      const handle = nextHandle++;
+      registry.set(handle, canvas);
+      return handle;
+    }),
+    MakeWebGLContext: jest.fn((handle: number) => {
+      const canvas = registry.get(handle);
+      // MakeWebGLContext starts by making the handle current, and returns
+      // null if it is not in the registry (never created, or deleted).
+      if (!canvas) {
+        return null;
+      }
+      if (contextOf(canvas).lost) {
+        // Building a GrDirectContext reads the GL version string, which is
+        // null on a lost context: a null-pointer fault inside wasm (the
+        // "rangeMin" RuntimeError in #3976).
+        throw new Error("RuntimeError: null function or function signature");
+      }
+      return grContext;
+    }),
     MakeOnScreenGLSurface: jest.fn((_ctx, width, height) =>
       width === 0 || height === 0 ? null : rawSurface
     ),
-    deleteContext: jest.fn(),
+    // Unregistering the context is what releases the canvas element that
+    // CanvasKit's GL registry retained in #3924.
+    deleteContext: jest.fn((handle: number) => {
+      registry.delete(handle);
+    }),
     ColorSpace: { SRGB: "srgb" },
     TRANSPARENT: Float32Array.of(0, 0, 0, 0),
   };
-  return { CanvasKitMock, rawCanvas, rawSurface };
+  return { CanvasKitMock, rawCanvas, rawSurface, grContext, registry };
+};
+
+const installCanvasKit = () => {
+  const mock = createCanvasKitMock();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (global as any).CanvasKit = mock.CanvasKitMock;
+  return mock;
 };
 
 const fakePicture = { ref: { __picture: true }, dispose: jest.fn() };
@@ -93,7 +207,8 @@ beforeAll(() => {
     configurable: true,
     get: () => canvasSize.height,
   });
-  HTMLCanvasElement.prototype.getContext = jest.fn(() => null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  HTMLCanvasElement.prototype.getContext = getContextMock as any;
   Object.defineProperty(window, "devicePixelRatio", {
     configurable: true,
     get: () => display.pixelDensity,
@@ -125,22 +240,81 @@ beforeEach(() => {
   display.pixelDensity = 1;
 });
 
-const mountView = (nativeID: string, onLayout?: () => void) => {
+// Dispatches a picture the way the reconciler does. The draw is flushed from
+// a microtask, hence the async act.
+const setPicture = (nativeID: number) =>
+  act(async () => {
+    (global.SkiaViewApi as ISkiaViewApiWeb).setJsiProperty(
+      nativeID,
+      "picture",
+      fakePicture as unknown as SkPicture
+    );
+  });
+
+// Delivers a ResizeObserver entry for the current canvas size.
+const deliverResize = () => {
+  const observer = resizeObservers[resizeObservers.length - 1];
+  act(() => {
+    observer.callback([
+      {
+        target: observer.targets[0],
+        contentRect: {
+          left: 0,
+          top: 0,
+          width: canvasSize.width,
+          height: canvasSize.height,
+        },
+      },
+    ]);
+  });
+};
+
+// Lets pending microtasks (draw flushes, WebGL context events) run.
+const flushMicrotasks = () => act(async () => {});
+
+// Lets pending zero-delay timers run too.
+const flushTimers = () =>
+  act(() => new Promise((resolve) => setTimeout(resolve, 0)));
+
+interface MountOptions {
+  onLayout?: () => void;
+  strict?: boolean;
+  isStatic?: boolean;
+}
+
+const mountView = (nativeID: string, options: MountOptions = {}) => {
   const container = document.createElement("div");
   document.body.appendChild(container);
   const root = createRoot(container);
-  act(() => {
-    root.render(
+  const render = ({
+    onLayout,
+    strict = false,
+    isStatic = false,
+  }: MountOptions) => {
+    const view = (
       <SkiaPictureView
         nativeID={nativeID}
         onLayout={onLayout}
+        __destroyWebGLContextAfterRender={isStatic}
         style={{ width: 360, height: 520 }}
       />
     );
-  });
+    act(() => {
+      root.render(strict ? <StrictMode>{view}</StrictMode> : view);
+    });
+  };
+  render(options);
   return {
-    unmount: () => {
-      act(() => root.unmount());
+    render,
+    canvas: () => {
+      const canvas = container.querySelector("canvas");
+      if (!canvas) {
+        throw new Error("The view has no canvas element");
+      }
+      return canvas;
+    },
+    unmount: async () => {
+      await act(async () => root.unmount());
       container.remove();
     },
   };
@@ -148,9 +322,7 @@ const mountView = (nativeID: string, onLayout?: () => void) => {
 
 describe("SkiaPictureView.web", () => {
   it("paints a picture without ever receiving a layout event", async () => {
-    const { CanvasKitMock, rawCanvas } = createCanvasKitMock();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (global as any).CanvasKit = CanvasKitMock;
+    const { CanvasKitMock, rawCanvas } = installCanvasKit();
     canvasSize.width = 360;
     canvasSize.height = 520;
 
@@ -159,66 +331,43 @@ describe("SkiaPictureView.web", () => {
     expect(CanvasKitMock.GetWebGLContext).toHaveBeenCalledTimes(1);
     expect(CanvasKitMock.MakeOnScreenGLSurface).toHaveBeenCalledTimes(1);
 
-    // Dispatch a picture the way the reconciler does — note that no
-    // ResizeObserver entry has been delivered at this point. The draw is
-    // flushed from a microtask, hence the async act.
-    const api = global.SkiaViewApi as ISkiaViewApiWeb;
-    await act(async () => {
-      api.setJsiProperty(1, "picture", fakePicture as unknown as SkPicture);
-    });
+    // Note that no ResizeObserver entry has been delivered at this point.
+    await setPicture(1);
     expect(rawCanvas.drawPicture).toHaveBeenCalledWith(fakePicture.ref);
 
-    view.unmount();
+    await view.unmount();
     expect(CanvasKitMock.deleteContext).toHaveBeenCalledWith(1);
   });
 
   it("holds a picture dispatched while unmeasured and paints it on first resize", async () => {
-    const { CanvasKitMock, rawCanvas } = createCanvasKitMock();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (global as any).CanvasKit = CanvasKitMock;
+    const { CanvasKitMock, rawCanvas } = installCanvasKit();
 
     const view = mountView("2");
     // No measurable size yet: the renderer exists but has no surface.
     expect(CanvasKitMock.GetWebGLContext).toHaveBeenCalledTimes(1);
     expect(CanvasKitMock.MakeOnScreenGLSurface).not.toHaveBeenCalled();
 
-    const api = global.SkiaViewApi as ISkiaViewApiWeb;
-    await act(async () => {
-      api.setJsiProperty(2, "picture", fakePicture as unknown as SkPicture);
-    });
+    await setPicture(2);
     expect(rawCanvas.drawPicture).not.toHaveBeenCalled();
 
     // The canvas gets its size: the observer delivery must create the
     // surface and paint the held picture synchronously.
     canvasSize.width = 360;
     canvasSize.height = 520;
-    const observer = resizeObservers[resizeObservers.length - 1];
-    act(() => {
-      observer.callback([
-        {
-          target: observer.targets[0],
-          contentRect: { left: 0, top: 0, width: 360, height: 520 },
-        },
-      ]);
-    });
+    deliverResize();
     expect(CanvasKitMock.MakeOnScreenGLSurface).toHaveBeenCalledTimes(1);
     expect(rawCanvas.drawPicture).toHaveBeenCalledWith(fakePicture.ref);
 
-    view.unmount();
+    await view.unmount();
   });
 
   it("recreates the surface at the new density when the pixel density changes", async () => {
-    const { CanvasKitMock, rawCanvas } = createCanvasKitMock();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (global as any).CanvasKit = CanvasKitMock;
+    const { CanvasKitMock, rawCanvas } = installCanvasKit();
     canvasSize.width = 360;
     canvasSize.height = 520;
 
     const view = mountView("4");
-    const api = global.SkiaViewApi as ISkiaViewApiWeb;
-    await act(async () => {
-      api.setJsiProperty(4, "picture", fakePicture as unknown as SkPicture);
-    });
+    await setPicture(4);
     expect(CanvasKitMock.MakeOnScreenGLSurface).toHaveBeenLastCalledWith(
       expect.anything(),
       360,
@@ -241,30 +390,20 @@ describe("SkiaPictureView.web", () => {
     );
     expect(rawCanvas.drawPicture).toHaveBeenCalledWith(fakePicture.ref);
 
-    view.unmount();
+    await view.unmount();
   });
 
   it("fires onLayout from the resize observer", async () => {
-    const { CanvasKitMock } = createCanvasKitMock();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (global as any).CanvasKit = CanvasKitMock;
+    installCanvasKit();
     canvasSize.width = 360;
     canvasSize.height = 520;
 
     const onLayout = jest.fn();
-    const view = mountView("3", onLayout);
-    const observer = resizeObservers[resizeObservers.length - 1];
-    act(() => {
-      observer.callback([
-        {
-          target: observer.targets[0],
-          contentRect: { left: 0, top: 0, width: 360, height: 520 },
-        },
-      ]);
-    });
+    const view = mountView("3", { onLayout });
+    deliverResize();
     // onLayout is delivered from a macrotask, like react-native-web.
     expect(onLayout).not.toHaveBeenCalled();
-    await act(() => new Promise((resolve) => setTimeout(resolve, 0)));
+    await flushTimers();
     expect(onLayout).toHaveBeenCalledTimes(1);
     expect(onLayout.mock.calls[0][0].nativeEvent.layout).toEqual({
       x: 0,
@@ -273,6 +412,202 @@ describe("SkiaPictureView.web", () => {
       height: 520,
     });
 
-    view.unmount();
+    await view.unmount();
+  });
+
+  // #3976: the renderer is built and disposed in a layout effect, but effect
+  // cleanup does not imply the host node is gone. React re-runs layout
+  // effects on a *preserved* <canvas> element under StrictMode's DEV
+  // double-invoke (doubleInvokeEffectsOnFiber) and when an Activity/offscreen
+  // subtree is revealed (reappearLayoutEffects). Losing the element's WebGL
+  // context on dispose lost it permanently, so the second construction could
+  // not build a GrDirectContext on it.
+  it("survives its layout effect being re-run on the same canvas element", async () => {
+    const { CanvasKitMock, rawCanvas } = installCanvasKit();
+    canvasSize.width = 360;
+    canvasSize.height = 520;
+
+    const view = mountView("5", { strict: true });
+
+    // The effect really was torn down and re-run, against the very same
+    // element. Without this the test could pass without exercising the bug.
+    const canvasArgs = CanvasKitMock.GetWebGLContext.mock.calls.map(
+      ([canvas]) => canvas
+    );
+    expect(canvasArgs.length).toBeGreaterThan(1);
+    expect(new Set(canvasArgs).size).toBe(1);
+
+    // ...and the renderer that came out of it can still paint.
+    await setPicture(5);
+    expect(contextOf(view.canvas()).lost).toBe(false);
+    expect(rawCanvas.drawPicture).toHaveBeenCalledWith(fakePicture.ref);
+
+    await view.unmount();
+  });
+
+  // #3349: browsers cap the number of live WebGL contexts per page (Chrome
+  // evicts the oldest past 16) and a detached canvas keeps its context alive
+  // until garbage collection, so a canvas that really leaves the document must
+  // lose its context eagerly — without breaking the re-run case above.
+  it("loses the element's context once the element has left the document", async () => {
+    const { registry } = installCanvasKit();
+    canvasSize.width = 360;
+    canvasSize.height = 520;
+
+    const view = mountView("6", { strict: true });
+    const canvas = view.canvas();
+    const ctx = contextOf(canvas);
+    await flushMicrotasks();
+    // Re-run on a connected element: the context is kept, and exactly one
+    // handle for it is registered.
+    expect(ctx.lost).toBe(false);
+    expect(registry.size).toBe(1);
+
+    await view.unmount();
+    expect(canvas.isConnected).toBe(false);
+    expect(ctx.lost).toBe(true);
+    expect(registry.size).toBe(0);
+  });
+
+  // A canvas whose renderer is disposed but which stays in the document
+  // (hidden in an Activity) keeps its context, but must not keep a full-size
+  // drawing buffer (which CanvasKit requests with depth and stencil).
+  it("frees the drawing buffer when its renderer is disposed", async () => {
+    installCanvasKit();
+    canvasSize.width = 360;
+    canvasSize.height = 520;
+    display.pixelDensity = 2;
+
+    const view = mountView("7");
+    const canvas = view.canvas();
+    await setPicture(7);
+    expect(canvas.width).toBe(720);
+    expect(canvas.height).toBe(1040);
+
+    await view.unmount();
+    expect(canvas.width).toBe(0);
+    expect(canvas.height).toBe(0);
+  });
+
+  it("recovers from the browser losing and restoring the context", async () => {
+    const { CanvasKitMock, rawCanvas, grContext, registry } =
+      installCanvasKit();
+    canvasSize.width = 360;
+    canvasSize.height = 520;
+
+    const view = mountView("8");
+    await setPicture(8);
+    expect(rawCanvas.drawPicture).toHaveBeenCalledTimes(1);
+    const ctx = contextOf(view.canvas());
+
+    // "Too many active WebGL contexts. Oldest context will be lost."
+    ctx.lose();
+    // The event hasn't been delivered yet, but the context is already gone:
+    // a resize in that window must neither throw nor build a surface.
+    canvasSize.width = 400;
+    deliverResize();
+    expect(CanvasKitMock.MakeOnScreenGLSurface).toHaveBeenCalledTimes(1);
+
+    await flushMicrotasks();
+    // The loss was acknowledged so that the browser is allowed to restore
+    // the context, and every GL object built on it was released.
+    expect(ctx.restoreAllowed).toBe(true);
+    expect(grContext.releaseResourcesAndAbandonContext).toHaveBeenCalledTimes(
+      1
+    );
+    expect(registry.size).toBe(0);
+
+    // Redraw requests while lost are dropped, not crashes.
+    rawCanvas.drawPicture.mockClear();
+    await setPicture(8);
+    expect(rawCanvas.drawPicture).not.toHaveBeenCalled();
+
+    // A slot freed up: the browser brings the context back. The renderer
+    // rebuilds on it, at the size the canvas has by now, and repaints.
+    ctx.restore();
+    await flushMicrotasks();
+    expect(ctx.lost).toBe(false);
+    expect(CanvasKitMock.GetWebGLContext).toHaveBeenCalledTimes(2);
+    expect(registry.size).toBe(1);
+    expect(CanvasKitMock.MakeOnScreenGLSurface).toHaveBeenLastCalledWith(
+      expect.anything(),
+      400,
+      520,
+      "srgb"
+    );
+    expect(rawCanvas.drawPicture).toHaveBeenCalledWith(fakePicture.ref);
+
+    await view.unmount();
+  });
+
+  // The context of a canvas that has no renderer attached (hidden in an
+  // Activity) can be evicted meanwhile; the renderer built on it when it is
+  // revealed cannot use CanvasKit on it (MakeWebGLContext faults) and has to
+  // ask for the context back first.
+  it("waits for a context lost while no renderer was attached", async () => {
+    const { CanvasKitMock, rawCanvas } = installCanvasKit();
+    canvasSize.width = 360;
+    canvasSize.height = 520;
+
+    // StrictMode's double-invoke is the one way to detach and re-attach a
+    // renderer on a preserved element with React 19.0 (no Activity yet).
+    // The eviction is made to happen at the exact moment the first renderer
+    // lets go of the context, i.e. with no renderer attached.
+    const deleteContext = CanvasKitMock.deleteContext.getMockImplementation();
+    CanvasKitMock.deleteContext.mockImplementationOnce((handle: number) => {
+      contextOf(CanvasKitMock.GetWebGLContext.mock.calls[0][0]).lose();
+      deleteContext?.(handle);
+    });
+    const view = mountView("9", { strict: true });
+    const ctx = contextOf(view.canvas());
+    expect(ctx.lost).toBe(true);
+    // Constructed on a lost context: no fault, and no attempt to build on it.
+    expect(CanvasKitMock.GetWebGLContext).toHaveBeenCalledTimes(1);
+
+    // The lost event goes through; a browser only records the permission to
+    // restore once its dispatch is over, so the request has to come from a
+    // later task.
+    await flushMicrotasks();
+    expect(ctx.restoreAllowed).toBe(true);
+    expect(ctx.lost).toBe(true);
+    const surfacesBefore =
+      CanvasKitMock.MakeOnScreenGLSurface.mock.calls.length;
+    await flushTimers();
+    expect(ctx.lost).toBe(false);
+    expect(CanvasKitMock.GetWebGLContext).toHaveBeenCalledTimes(2);
+    expect(CanvasKitMock.MakeOnScreenGLSurface).toHaveBeenCalledTimes(
+      surfacesBefore + 1
+    );
+
+    await setPicture(9);
+    expect(rawCanvas.drawPicture).toHaveBeenCalledWith(fakePicture.ref);
+
+    await view.unmount();
+  });
+
+  // A canvas element is bound to one context kind for life: the static
+  // renderer draws through a 2D context, so switching renderers on the same
+  // element would fail in either direction.
+  it("switches to a fresh canvas element when the renderer kind changes", async () => {
+    const { registry } = installCanvasKit();
+    canvasSize.width = 360;
+    canvasSize.height = 520;
+
+    const view = mountView("10");
+    const webglCanvas = view.canvas();
+    const ctx = contextOf(webglCanvas);
+    expect(registry.size).toBe(1);
+
+    view.render({ isStatic: true });
+    await flushMicrotasks();
+    const staticCanvas = view.canvas();
+    expect(staticCanvas).not.toBe(webglCanvas);
+    // The old element really went away, context and all.
+    expect(webglCanvas.isConnected).toBe(false);
+    expect(ctx.lost).toBe(true);
+    expect(registry.size).toBe(0);
+    expect(contexts.has(staticCanvas)).toBe(false);
+
+    await view.unmount();
   });
 });