# useCanvasContext

```ts
import { useCanvasContext } from "@pibbl/core";
```

`useCanvasContext()` returns [`RenderingContext2D`](/reference/types/canvas-runtime/#renderingcontext2d) and is render-only: call it synchronously
from a Pibbl component while it is rendering, never from pure measurement or an
event callback. Pibbl isolates [`Canvas`](/reference/types/canvas-runtime/#canvas) state around component traversal; do not
retain the context for later work.

```tsx
function Marker() {
  const context = useCanvasContext();
  context.fillRect(0, 0, 8, 8);
}
```

Use a public drawing component where possible; custom Canvas work belongs in a
custom component or primitive.

## API details from source

<span id="api-useCanvasContext"></span>

Returns the current component's isolated Canvas 2D context.

```ts
useCanvasContext: () => RenderingContext2D
```

Related API: [useCanvasContext](/reference/hooks/use-canvas-context/), [RenderingContext2D](/reference/types/canvas-runtime/#renderingcontext2d).

### Returns

The active Canvas 2D rendering context for this component evaluation. See
[RenderingContext2D](/reference/types/canvas-runtime/#renderingcontext2d) .

### See also

[RenderingContext2D](/reference/types/canvas-runtime/#renderingcontext2d)

[View source — packages/core/src/lib/hooks/use-canvas-context.ts:16](/source/packages/core/src/lib/hooks/use-canvas-context-ts/#L16)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Define a Canvas primitive](/minimal-examples/lifecycle/primitive/): Supply synchronous drawing, style normalization, resolution, and opt-in measurement. [Plain source](/minimal/lifecycle/primitive.tsx)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.