Renderer - tsdraw

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

import { CanvasRenderer } from '@tsdraw/core'

ICanvasRenderer interface

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

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

TsdrawRenderTheme

interface TsdrawRenderTheme {
  resolveColor(colorKey: string): string
}

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

resolveThemeColor

import { resolveThemeColor } from '@tsdraw/core'

const hex = resolveThemeColor(theme, 'blue')

Background renderer

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.

renderCanvasBackground(
  ctx: CanvasRenderingContext2D,
  viewport: Viewport,
  canvasWidth: number,
  canvasHeight: number,
  options: TsdrawBackgroundOptions
): void