Offscreen Canvas

GPUOffscreenCanvas is a helper shim that mimics the Web OffscreenCanvas API. It is offered as a convenience to quickly produce offscreen renderings with CPU readback.

Basic usage

import { GPUOffscreenCanvas } from "react-native-webgpu";

const canvas = new GPUOffscreenCanvas(256, 256);
const context = canvas.getContext("webgpu")!;

const device = await adapter.requestDevice();
context.configure({ device, format: "rgba8unorm" });

// encode render passes into the offscreen target…
device.queue.submit([encoder.finish()]);

const pixels = await canvas.getImageData(); // CPU readback

getImageData() copies the canvas texture into a buffer, maps it, and resolves with { data, width, height, format }, where data holds 4 bytes per pixel, row by row. Because WebGPU copies rows in multiples of 256 bytes, the canvas width must be a multiple of 64.

It is meant for tests, snapshots and one-off exports; to read pixels repeatedly, copy the texture into a reusable GPUBuffer of your own with copyTextureToBuffer.