---
title: Context
description: init() creates the Gpu context; every surface, target, effect, and frame is created from it.
---

# Context



Everything in vgpu starts from one call. `init()` requests the WebGPU adapter and device and returns a [`Gpu`](/docs/reference/vgpu/gpu#gpu) context. Every other object — surfaces, targets, effects, draws, frames — is created from that context, so all of them share one device.

```ts
import { init, effect, surface, target } from "vgpu";

const gpu = await init();

const canvas = document.querySelector("canvas")!;
const canvasSurface = surface(gpu, canvas); // the canvas you render into
const colorTarget = target(gpu, { size: [256, 256] }); // an offscreen texture
const gradient = effect(gpu, `
  @fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
    return vec4f(uv, 0.4, 1.0);
  }
`);

// Render the gradient onto the canvas once
gradient.draw(canvasSurface);
```

## Create resources once, draw every frame

Create the context, surface, and effects once, up front. Each `draw()` renders immediately; rendering should encode work, not rebuild long-lived resources every tick.

The expensive objects — context, surface, effect — live outside your render code and are reused by every draw. What changes per frame is data, not resources.


---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)