Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions runtime/reference/web_platform_apis.md
Original file line number Diff line number Diff line change
Expand Up @@ -489,6 +489,55 @@ const worker = new Worker(import.meta.resolve("./worker.js"), {
});
```

## OffscreenCanvas

Starting in Deno 2.8, the
[`OffscreenCanvas`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas)
API is available. `OffscreenCanvas` is a canvas that lives outside any DOM and
can be used anywhere — including Web Workers — for off-thread rendering and
image generation.

### Supported rendering contexts

`OffscreenCanvas#getContext` accepts two of the spec-defined context ids:

- `"bitmaprenderer"` — returns an
[`ImageBitmapRenderingContext`](https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmapRenderingContext)
for displaying an `ImageBitmap` produced via `createImageBitmap`.
- `"webgpu"` — returns a
[`GPUCanvasContext`](https://developer.mozilla.org/en-US/docs/Web/API/GPUCanvasContext)
for rendering with WebGPU.

Calling `getContext` with `"2d"`, `"webgl"`, or `"webgl2"` returns `null` —
these contexts are not implemented in Deno.

### Example: encoding an image to PNG

Decode an image into an `ImageBitmap`, place it on an `OffscreenCanvas` via
the `bitmaprenderer` context, and write the result to disk:

```ts
const data = await Deno.readFile("./input.jpg");
const bitmap = await createImageBitmap(new Blob([data]));

const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
const ctx = canvas.getContext("bitmaprenderer")!;
ctx.transferFromImageBitmap(bitmap);

const blob = await canvas.convertToBlob({ type: "image/png" });
await Deno.writeFile(
"./output.png",
new Uint8Array(await blob.arrayBuffer()),
);
```

Typical uses:

- producing thumbnails, format conversions, or social-card images at request
time without spinning up a headless browser,
- running off-thread image work inside a Web Worker,
- driving WebGPU rendering targets that don't need a window.

## Deviations of other APIs from spec

### Cache API
Expand Down
Loading