> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tsdraw.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Renderer

> API reference for the canvas renderer

The `CanvasRenderer` draws shapes onto an HTML canvas using the Canvas 2D API.

```typescript theme={null}
import { CanvasRenderer } from '@tsdraw/core'
```

## ICanvasRenderer interface

```typescript theme={null}
interface ICanvasRenderer {
  render(
    ctx: CanvasRenderingContext2D,
    shapes: Shape[],
    viewport: Viewport,
    theme: TsdrawRenderTheme
  ): void
}
```

## CanvasRenderer

The default implementation. Renders strokes using `perfect-freehand` for the `draw` dash style, and Canvas 2D `setLineDash` for other styles.

### Rendering pipeline

1. Apply viewport transform (translate + scale)
2. For each visible shape, decode segment paths and render strokes
3. For closed shapes with fill, render the fill first, then the stroke

## TsdrawRenderTheme

```typescript theme={null}
interface TsdrawRenderTheme {
  resolveColor(colorKey: string): string
}
```

Maps palette keys (e.g. `'blue'`) to hex colors, adapting for the current light/dark theme.

### resolveThemeColor

```typescript theme={null}
import { resolveThemeColor } from '@tsdraw/core'

const hex = resolveThemeColor(theme, 'blue')
```

## Background renderer

```typescript theme={null}
import { renderCanvasBackground } from '@tsdraw/core'

type TsdrawBackgroundType = 'blank' | 'lines' | 'grid' | 'dots'
```

Draws a background pattern behind shapes. The pattern scales with the viewport zoom for consistent visual density.

```typescript theme={null}
renderCanvasBackground(
  ctx: CanvasRenderingContext2D,
  viewport: Viewport,
  canvasWidth: number,
  canvasHeight: number,
  options: TsdrawBackgroundOptions
): void
```