react-native-wgpu 0.1.7 → 0.1.9

package/lib/typescript/src/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./Canvas";
+export * from "./Offscreen";
 export * from "./WebGPUViewNativeComponent";
 export * from "./utils";
 export { default as WebGPUModule } from "./NativeWebGPUModule";

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,UAAU,CAAC;AACzB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/typescript/src/utils.d.ts

@@ -1,7 +1,10 @@
-import type { DependencyList } from "react";
-import type { CanvasRef } from "./Canvas";
+import type { RNCanvasContext, CanvasRef } from "./Canvas";
 type Unsubscribe = () => void;
 export declare const warnIfNotHardwareAccelerated: (adapter: GPUAdapter) => void;
-export declare const useCanvasEffect: (effect: () => void | Unsubscribe | Promise<void | Unsubscribe>, deps?: DependencyList) => import("react").RefObject<CanvasRef>;
+export declare const useGPUContext: () => {
+    ref: import("react").RefObject<CanvasRef>;
+    context: RNCanvasContext | null;
+};
+export declare const useCanvasEffect: (effect: () => void | Unsubscribe | Promise<Unsubscribe | void> | Promise<void>) => import("react").RefObject<CanvasRef>;
 export {};
 //# sourceMappingURL=utils.d.ts.map

package/lib/typescript/src/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,KAAK,WAAW,GAAG,MAAM,IAAI,CAAC;AAE9B,eAAO,MAAM,4BAA4B,YAAa,UAAU,SAM/D,CAAC;AAEF,eAAO,MAAM,eAAe,WAClB,MAAM,IAAI,GAAG,WAAW,GAAG,OAAO,CAAC,IAAI,GAAG,WAAW,CAAC,SACxD,cAAc,yCAwBrB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE3D,KAAK,WAAW,GAAG,MAAM,IAAI,CAAC;AAE9B,eAAO,MAAM,4BAA4B,YAAa,UAAU,SAM/D,CAAC;AAEF,eAAO,MAAM,aAAa;;;CAOzB,CAAC;AAEF,eAAO,MAAM,eAAe,WAClB,MACJ,IAAI,GACJ,WAAW,GACX,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,GAC3B,OAAO,CAAC,IAAI,CAAC,yCAuBlB,CAAC"}

package/libs/apple/libwebgpu_dawn.xcframework/Info.plist

@@ -4,6 +4,36 @@
 <dict>
 	<key>AvailableLibraries</key>
 	<array>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libwebgpu_dawn.a</string>
+			<key>LibraryIdentifier</key>
+			<string>xros-arm64</string>
+			<key>LibraryPath</key>
+			<string>libwebgpu_dawn.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>xros</string>
+		</dict>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libwebgpu_dawn.a</string>
+			<key>LibraryIdentifier</key>
+			<string>xros-arm64-simulator</string>
+			<key>LibraryPath</key>
+			<string>libwebgpu_dawn.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>xros</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
+		</dict>
 		<dict>
 			<key>BinaryPath</key>
 			<string>libwebgpu_dawn.a</string>
@@ -35,6 +65,21 @@
 			<key>SupportedPlatform</key>
 			<string>ios</string>
 		</dict>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libwebgpu_dawn.a</string>
+			<key>LibraryIdentifier</key>
+			<string>macos-arm64_x86_64</string>
+			<key>LibraryPath</key>
+			<string>libwebgpu_dawn.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>x86_64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>macos</string>
+		</dict>
 	</array>
 	<key>CFBundlePackageType</key>
 	<string>XFWK</string>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wgpu",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/react-native-wgpu.podspec

@@ -15,17 +15,11 @@ Pod::Spec.new do |s|
   s.source       = { :git => "https://github.com/wcandillon/react-native-webgpu.git", :tag => "#{s.version}" }
 
   s.source_files = [
-    "ios/**/*.{h,c,cc,cpp,m,mm,swift}",  
+    "ios/**/*.{h,c,cc,cpp,m,mm,swift}",
     "cpp/**/*.{h,cpp}"
   ]
 
-  s.ios.vendored_frameworks = [
-    'libs/apple/libwebgpu_dawn.xcframework',
-  ]
-
-  s.visionos.vendored_frameworks = [
-    'libs/apple/libwebgpu_dawn_visionos.xcframework',
-  ]
+  s.vendored_frameworks = 'libs/apple/libwebgpu_dawn.xcframework'
 
   s.pod_target_xcconfig = {
     'HEADER_SEARCH_PATHS' => '$(PODS_TARGET_SRCROOT)/cpp',

package/src/Canvas.tsx

@@ -1,8 +1,17 @@
-import type { ViewProps } from "react-native";
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import type { ViewProps, LayoutChangeEvent } from "react-native";
+import { View } from "react-native";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  useLayoutEffect,
+  useCallback,
+} from "react";
+import type { RefObject } from "react";
 
 import WebGPUNativeView from "./WebGPUViewNativeComponent";
-import WebGPUNativeModule from "./NativeWebGPUModule";
 
 let CONTEXT_COUNTER = 1;
 function generateContextId() {
@@ -10,12 +19,16 @@ function generateContextId() {
 }
 
 declare global {
-  // eslint-disable-next-line no-var
-  var __WebGPUContextRegistry: Record<number, NativeCanvas>;
   // eslint-disable-next-line no-var
   var RNWebGPU: {
     gpu: GPU;
-    MakeWebGPUCanvasContext: (nativeCanvas: NativeCanvas) => CanvasContext;
+    fabric: boolean;
+    getNativeSurface: (contextId: number) => NativeCanvas;
+    MakeWebGPUCanvasContext: (
+      contextId: number,
+      width: number,
+      height: number,
+    ) => RNCanvasContext;
     DecodeToUTF8: (buffer: NodeJS.ArrayBufferView | ArrayBuffer) => string;
     createImageBitmap: typeof createImageBitmap;
   };
@@ -31,45 +44,96 @@ export interface NativeCanvas {
   clientHeight: number;
 }
 
-global.__WebGPUContextRegistry = {};
-const WebGPUContextRegistry = global.__WebGPUContextRegistry;
-
-type CanvasContext = GPUCanvasContext & {
+export type RNCanvasContext = GPUCanvasContext & {
   present: () => void;
 };
 
 export interface CanvasRef {
-  getContext(contextName: "webgpu"): CanvasContext | null;
+  getContext(contextName: "webgpu"): RNCanvasContext | null;
   getNativeSurface: () => NativeCanvas;
+  whenReady: (callback: () => void) => void;
 }
 
-export const Canvas = forwardRef<CanvasRef, ViewProps>((props, ref) => {
-  const [contextId, _] = useState(() => generateContextId());
+interface Size {
+  width: number;
+  height: number;
+}
 
-  useImperativeHandle(ref, () => ({
-    getNativeSurface: () => {
-      WebGPUNativeModule.createSurfaceContext(contextId);
-      return WebGPUContextRegistry[contextId];
-    },
-    getContext(contextName: "webgpu"): CanvasContext | null {
-      if (contextName !== "webgpu") {
-        throw new Error(`[WebGPU] Unsupported context: ${contextName}`);
-      }
-      WebGPUNativeModule.createSurfaceContext(contextId);
-      const nativeSurface = WebGPUContextRegistry[contextId];
-      if (!nativeSurface) {
-        return null;
+const useSizeFabric = (ref: RefObject<View>) => {
+  const [size, setSize] = useState<null | Size>(null);
+  useLayoutEffect(() => {
+    if (!ref.current) {
+      throw new Error("Canvas ref is null");
+    }
+    ref.current.measureInWindow((_x, _y, width, height) => {
+      setSize({ width, height });
+    });
+  }, [ref]);
+  return { size, onLayout: undefined };
+};
+
+const useSizePaper = (_ref: RefObject<View>) => {
+  const [size, setSize] = useState<null | Size>(null);
+  const onLayout = useCallback<(event: LayoutChangeEvent) => void>(
+    ({
+      nativeEvent: {
+        layout: { width, height },
+      },
+    }) => {
+      if (size === null) {
+        setSize({ width, height });
       }
-      const ctx = RNWebGPU.MakeWebGPUCanvasContext(nativeSurface);
-      return ctx;
     },
-  }));
-
-  useEffect(() => {
-    return () => {
-      delete WebGPUContextRegistry[contextId];
-    };
-  }, [contextId]);
+    [size],
+  );
+  return { size, onLayout };
+};
 
-  return <WebGPUNativeView {...props} contextId={contextId} />;
-});
+export const Canvas = forwardRef<CanvasRef, ViewProps>(
+  ({ onLayout: _onLayout, ...props }, ref) => {
+    const viewRef = useRef(null);
+    const FABRIC = RNWebGPU.fabric;
+    const useSize = FABRIC ? useSizeFabric : useSizePaper;
+    const [contextId, _] = useState(() => generateContextId());
+    const cb = useRef<() => void>();
+    const { size, onLayout } = useSize(viewRef);
+    useEffect(() => {
+      if (size && cb.current) {
+        cb.current();
+      }
+    }, [size]);
+    useImperativeHandle(ref, () => ({
+      getNativeSurface: () => {
+        if (size === null) {
+          throw new Error("[WebGPU] Canvas size is not available yet");
+        }
+        return RNWebGPU.getNativeSurface(contextId);
+      },
+      whenReady(callback: () => void) {
+        if (size === null) {
+          cb.current = callback;
+        } else {
+          callback();
+        }
+      },
+      getContext(contextName: "webgpu"): RNCanvasContext | null {
+        if (contextName !== "webgpu") {
+          throw new Error(`[WebGPU] Unsupported context: ${contextName}`);
+        }
+        if (size === null) {
+          throw new Error("[WebGPU] Canvas size is not available yet");
+        }
+        return RNWebGPU.MakeWebGPUCanvasContext(
+          contextId,
+          size.width,
+          size.height,
+        );
+      },
+    }));
+    return (
+      <View ref={viewRef} onLayout={onLayout} {...props}>
+        <WebGPUNativeView style={{ flex: 1 }} contextId={contextId} />
+      </View>
+    );
+  },
+);

package/src/Offscreen.ts

@@ -0,0 +1,164 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export class GPUOffscreenCanvas implements OffscreenCanvas {
+  width: number;
+  height: number;
+  oncontextlost: ((this: OffscreenCanvas, ev: Event) => any) | null = null;
+  oncontextrestored: ((this: OffscreenCanvas, ev: Event) => any) | null = null;
+
+  private context: GPUOffscreenCanvasContext;
+
+  constructor(width: number, height: number) {
+    this.width = width;
+    this.height = height;
+    this.context = new GPUOffscreenCanvasContext(this);
+  }
+
+  convertToBlob(_options?: ImageEncodeOptions): Promise<Blob> {
+    // Implementation for converting the canvas content to a Blob
+    throw new Error("Method not implemented.");
+  }
+
+  // Overloaded method signatures
+  getContext(
+    contextId: "2d",
+    options?: any,
+  ): OffscreenCanvasRenderingContext2D | null;
+  getContext(
+    contextId: "bitmaprenderer",
+    options?: any,
+  ): ImageBitmapRenderingContext | null;
+  getContext(contextId: "webgl", options?: any): WebGLRenderingContext | null;
+  getContext(contextId: "webgl2", options?: any): WebGL2RenderingContext | null;
+  getContext(
+    contextId: OffscreenRenderingContextId,
+    options?: any,
+  ): OffscreenRenderingContext | null;
+  getContext(contextId: "webgpu"): GPUOffscreenCanvasContext | null;
+  getContext(
+    contextId: unknown,
+    _options?: any,
+  ): OffscreenRenderingContext | GPUOffscreenCanvasContext | null {
+    if (contextId === "webgpu") {
+      return this.context;
+    }
+    // Implement other context types if necessary
+    return null;
+  }
+
+  transferToImageBitmap(): ImageBitmap {
+    // Implementation for transferring the canvas content to an ImageBitmap
+    throw new Error("Method not implemented.");
+  }
+
+  addEventListener<K extends keyof OffscreenCanvasEventMap>(
+    _type: K,
+    _listener: (this: OffscreenCanvas, ev: OffscreenCanvasEventMap[K]) => any,
+    _options?: boolean | AddEventListenerOptions,
+  ): void {
+    // Event listener implementation
+    throw new Error("Method not implemented.");
+  }
+
+  removeEventListener<K extends keyof OffscreenCanvasEventMap>(
+    _type: K,
+    _listener: (this: OffscreenCanvas, ev: OffscreenCanvasEventMap[K]) => any,
+    _options?: boolean | EventListenerOptions,
+  ): void {
+    // Remove event listener implementation
+    throw new Error("Method not implemented.");
+  }
+
+  dispatchEvent(_event: Event): boolean {
+    // Event dispatch implementation
+    throw new Error("Method not implemented.");
+  }
+
+  getImageData() {
+    const device = this.context.getDevice();
+    const texture = this.context.getTexture();
+    const commandEncoder = device.createCommandEncoder();
+    const bytesPerRow = this.width * 4;
+    const buffer = device.createBuffer({
+      size: bytesPerRow * this.height,
+      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
+    });
+    commandEncoder.copyTextureToBuffer(
+      { texture: texture },
+      { buffer: buffer, bytesPerRow },
+      [this.width, this.height],
+    );
+    device.queue.submit([commandEncoder.finish()]);
+
+    return buffer.mapAsync(GPUMapMode.READ).then(() => {
+      const arrayBuffer = buffer.getMappedRange();
+      const uint8Array = new Uint8Array(arrayBuffer);
+      const data = Array.from(uint8Array);
+      buffer.unmap();
+      return {
+        data,
+        width: this.width,
+        height: this.height,
+        format: navigator.gpu.getPreferredCanvasFormat(),
+      };
+    });
+  }
+}
+
+class GPUOffscreenCanvasContext implements GPUCanvasContext {
+  __brand = "GPUCanvasContext" as const;
+
+  private textureFormat: GPUTextureFormat;
+  private texture: GPUTexture | null = null;
+  private device: GPUDevice | null = null;
+
+  constructor(public readonly canvas: OffscreenCanvas) {
+    this.textureFormat = navigator.gpu.getPreferredCanvasFormat();
+  }
+
+  present() {
+    // Do nothing
+  }
+
+  getDevice() {
+    if (!this.device) {
+      throw new Error("Device is not configured.");
+    }
+    return this.device;
+  }
+
+  getTexture() {
+    if (!this.texture) {
+      throw new Error("Texture is not configured");
+    }
+    return this.texture;
+  }
+
+  configure(config: GPUCanvasConfiguration) {
+    // Configure the canvas context with the device and format
+    this.device = config.device;
+    this.texture = config.device.createTexture({
+      size: [this.canvas.width, this.canvas.height],
+      format: this.textureFormat,
+      usage:
+        GPUTextureUsage.RENDER_ATTACHMENT |
+        GPUTextureUsage.COPY_SRC |
+        GPUTextureUsage.TEXTURE_BINDING,
+    });
+    return undefined;
+  }
+
+  unconfigure() {
+    // Unconfigure the canvas context
+    if (this.texture) {
+      this.texture.destroy();
+    }
+    return undefined;
+  }
+
+  getCurrentTexture(): GPUTexture {
+    if (!this.texture) {
+      throw new Error("Texture is not configured");
+    }
+    return this.texture;
+  }
+}

package/src/__tests__/ExternalTexture.spec.ts

@@ -3,7 +3,7 @@ import { checkImage, client, encodeImage } from "./setup";
 describe("External Textures", () => {
   it("Simple (1)", async () => {
     const result = await client.eval(
-      ({ gpu, device, ctx, urls: { fTexture } }) => {
+      ({ gpu, device, ctx, canvas, urls: { fTexture } }) => {
         const module = device.createShaderModule({
           label: "our hardcoded textured quad shaders",
           code: /* wgsl */ `
@@ -131,7 +131,7 @@ describe("External Textures", () => {
                 device.queue.submit([commandBuffer]);
               }
               render();
-              return ctx.getImageData();
+              return canvas.getImageData();
             });
           });
         });
@@ -143,7 +143,7 @@ describe("External Textures", () => {
   });
   it("Simple (2)", async () => {
     const result = await client.eval(
-      ({ gpu, device, ctx, urls: { fTexture } }) => {
+      ({ gpu, device, ctx, canvas, urls: { fTexture } }) => {
         const module = device.createShaderModule({
           label: "our hardcoded textured quad shaders",
           code: /* wgsl */ `
@@ -271,7 +271,7 @@ describe("External Textures", () => {
                 device.queue.submit([commandBuffer]);
               }
               render();
-              return ctx.getImageData();
+              return canvas.getImageData();
             });
           });
         });

package/src/__tests__/Texture.spec.ts

@@ -138,7 +138,13 @@ describe("Texture", () => {
   });
   it("Create texture and reads it", async () => {
     const result = await client.eval(
-      ({ device, shaders: { triangleVertWGSL, redFragWGSL }, gpu, ctx }) => {
+      ({
+        device,
+        shaders: { triangleVertWGSL, redFragWGSL },
+        gpu,
+        ctx,
+        canvas,
+      }) => {
         const pipeline = device.createRenderPipeline({
           layout: "auto",
           vertex: {
@@ -182,7 +188,7 @@ describe("Texture", () => {
         passEncoder.end();
 
         device.queue.submit([commandEncoder.finish()]);
-        return ctx.getImageData();
+        return canvas.getImageData();
       },
     );
     const image = encodeImage(result);

package/src/__tests__/demos/ABuffer.spec.ts

@@ -248,6 +248,7 @@ describe("A Buffer", () => {
         translucentWGSL,
         mat4,
         vec3,
+        canvas,
       }) => {
         const presentationFormat = gpu.getPreferredCanvasFormat();
         const settings = {
@@ -579,7 +580,7 @@ describe("A Buffer", () => {
           }
 
           const depthTexture = device.createTexture({
-            size: [ctx.width, ctx.height],
+            size: [ctx.canvas.width, ctx.canvas.height],
             format: "depth24plus",
             usage:
               GPUTextureUsage.RENDER_ATTACHMENT |
@@ -605,12 +606,12 @@ describe("A Buffer", () => {
           // We want to keep the linked-list buffer size under the maxStorageBufferBindingSize.
           // Split the frame into enough slices to meet that constraint.
           const bytesPerline =
-            ctx.width * averageLayersPerFragment * linkedListElementSize;
+            ctx.canvas.width * averageLayersPerFragment * linkedListElementSize;
           const maxLinesSupported = Math.floor(
             device.limits.maxStorageBufferBindingSize / bytesPerline,
           );
-          const numSlices = Math.ceil(ctx.height / maxLinesSupported);
-          const sliceHeight = Math.ceil(ctx.height / numSlices);
+          const numSlices = Math.ceil(ctx.canvas.height / maxLinesSupported);
+          const sliceHeight = Math.ceil(ctx.canvas.height / numSlices);
           const linkedListBufferSize = sliceHeight * bytesPerline;
 
           const linkedListBuffer = device.createBuffer({
@@ -645,13 +646,17 @@ describe("A Buffer", () => {
           // * numFragments : u32
           // * data : array<u32>
           const headsBuffer = device.createBuffer({
-            size: (1 + ctx.width * sliceHeight) * Uint32Array.BYTES_PER_ELEMENT,
+            size:
+              (1 + ctx.canvas.width * sliceHeight) *
+              Uint32Array.BYTES_PER_ELEMENT,
             usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
             label: "headsBuffer",
           });
 
           const headsInitBuffer = device.createBuffer({
-            size: (1 + ctx.width * sliceHeight) * Uint32Array.BYTES_PER_ELEMENT,
+            size:
+              (1 + ctx.canvas.width * sliceHeight) *
+              Uint32Array.BYTES_PER_ELEMENT,
             usage: GPUBufferUsage.COPY_SRC,
             mappedAtCreation: true,
             label: "headsInitBuffer",
@@ -745,7 +750,7 @@ describe("A Buffer", () => {
 
           // Rotates the camera around the origin based on time.
           function getCameraViewProjMatrix() {
-            const aspect = ctx.width / ctx.height;
+            const aspect = ctx.canvas.width / ctx.canvas.height;
 
             const projectionMatrix = mat4.perspective(
               (2 * Math.PI) / 5,
@@ -776,8 +781,8 @@ describe("A Buffer", () => {
 
               new Float32Array(buffer).set(getCameraViewProjMatrix());
               new Uint32Array(buffer, 16 * Float32Array.BYTES_PER_ELEMENT).set([
-                averageLayersPerFragment * ctx.width * sliceHeight,
-                ctx.width,
+                averageLayersPerFragment * ctx.canvas.width * sliceHeight,
+                ctx.canvas.width,
               ]);
 
               device.queue.writeBuffer(uniformBuffer, 0, buffer);
@@ -810,9 +815,9 @@ describe("A Buffer", () => {
 
               const scissorX = 0;
               const scissorY = slice * sliceHeight;
-              const scissorWidth = ctx.width;
+              const scissorWidth = ctx.canvas.width;
               const scissorHeight =
-                Math.min((slice + 1) * sliceHeight, ctx.height) -
+                Math.min((slice + 1) * sliceHeight, ctx.canvas.height) -
                 slice * sliceHeight;
 
               // Draw the translucent objects
@@ -870,7 +875,7 @@ describe("A Buffer", () => {
 
         doDraw();
 
-        return ctx.getImageData();
+        return canvas.getImageData();
       },
       {
         mesh: teapotMesh,

package/src/__tests__/demos/Blur.spec.ts

@@ -133,6 +133,7 @@ describe("Blur", () => {
         assets: { di3D: imageBitmap },
         fullscreenTexturedQuadWGSL,
         blurWGSL,
+        canvas,
       }) => {
         const tileDim = 128;
         const batch = [4, 4];
@@ -387,7 +388,7 @@ describe("Blur", () => {
           device.queue.submit([commandEncoder.finish()]);
         }
         frame();
-        return ctx.getImageData();
+        return canvas.getImageData();
       },
       { blurWGSL: blur, fullscreenTexturedQuadWGSL: fullscreenTexturedQuad },
     );