---
url: /api/global/glCanvas/type-aliases/GLCanvas.md
---
# GLCanvas\<U *extends* [`UniformSources`](../../../types/types/type-aliases/UniformSources.md)<[`UniformContext`](../../../types/types/interfaces/UniformContext.md)> = [`UniformSources`](../../../types/types/type-aliases/UniformSources.md)<[`UniformContext`](../../../types/types/interfaces/UniformContext.md)>>

```ts
type GLCanvas<
  U extends UniformSources<UniformContext> = UniformSources<UniformContext>,
> = Disposable & {
  gl: WebGL2RenderingContext;
  render: (options?: RenderOptions<UniformContext>) => void;
  onCanvasReady: (callback: () => void) => void;
  canvas: HTMLCanvasElement | OffscreenCanvas;
  setSize: (size: { width: number; height: number }) => void;
  play: () => void;
  pause: () => void;
  dpr: number;
  uniforms: U;
  onUpdated: (callback: UpdatedCallback<U>) => void;
  onBeforeRender: (callback: () => void) => void;
  onAfterRender: (callback: () => void) => void;
  resizeObserver: ReturnType<typeof onResize> | null;
};
```

The object returned by [glCanvas](../functions/glCanvas.md).

## Type Declaration

| Name               | Type                                                                                                                                                                         | Description                                                         |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| `gl`               | `WebGL2RenderingContext`                                                                                                                                                     | The WebGL2 rendering context.                                       |
| `render()`         | (`options?`: [`RenderOptions`](../../../passes/renderPass/type-aliases/RenderOptions.md)<[`UniformContext`](../../../types/types/interfaces/UniformContext.md)>) => `void` | Executes one render of the complete pipeline.                       |
| `onCanvasReady()`  | (`callback`: () => `void`) => `void`                                                                                                                                         | Registers a callback called after the first canvas resize.          |
| `canvas`           | `HTMLCanvasElement` | `OffscreenCanvas`                                                                                                                                     | The HTML canvas or OffscreenCanvas being rendered into.             |
| `setSize()`        | (`size`: { `width`: `number`; `height`: `number`; }) => `void`                                                                                                             | Resizes the canvas and every managed render target.                 |
| `play()`           | () => `void`                                                                                                                                                                 | Starts the internal animation clock.                                |
| `pause()`          | () => `void`                                                                                                                                                                 | Pauses the internal animation clock.                                |
| `dpr`              | `number`                                                                                                                                                                     | The device pixel ratio used for CSS-sized canvas resizing.          |
| `uniforms`         | `U`                                                                                                                                                                          | Reactive proxy containing the main pass's original uniform sources. |
| `onUpdated()`      | (`callback`: [`UpdatedCallback`](../../../passes/rawRenderPass/type-aliases/UpdatedCallback.md)<`U`>) => `void`                                                            | Registers a callback whenever a main-pass uniform source changes.   |
| `onBeforeRender()` | (`callback`: () => `void`) => `void`                                                                                                                                         | Registers a callback before the complete pipeline renders.          |
| `onAfterRender()`  | (`callback`: () => `void`) => `void`                                                                                                                                         | Registers a callback after the complete pipeline renders.           |
| `resizeObserver`   | | `ReturnType`<*typeof* [`onResize`](../../../helpers/onResize/functions/onResize.md)> | `null`                                                                          | The resize observer, or `null` when sizing is manual or fixed.      |

## Type Parameters

### U

`U` *extends* [`UniformSources`](../../../types/types/type-aliases/UniformSources.md)<[`UniformContext`](../../../types/types/interfaces/UniformContext.md)> = [`UniformSources`](../../../types/types/type-aliases/UniformSources.md)<[`UniformContext`](../../../types/types/interfaces/UniformContext.md)>