Skip to main content
tsdraw can render patterned backgrounds behind the drawing canvas — useful for graph paper, dotted grids, or branded visuals.

​
Preset backgrounds

Four presets are available out of the box:
PresetDescription
blankNo background pattern (default)
linesHorizontal lines
gridSquare grid
dotsDot pattern
<Tsdraw background={{ type: 'lines' }} />

​
Custom backgrounds

For full control, pass a custom render function: 
<Tsdraw
  background={{
    type: 'custom',
    render: (ctx, viewport, canvasWidth, canvasHeight) => {
      ctx.fillStyle = '#f0f0f0'
      ctx.fillRect(0, 0, canvasWidth, canvasHeight)
      // draw your own pattern
    },
  }}
/>
The render function receives a CanvasRenderingContext2D, the current Viewport, and the canvas dimensions. It’s called every frame, so keep it efficient.

​
Background types

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

type TsdrawBackgroundOptions =
  | TsdrawBackgroundPreset
  | TsdrawBackgroundCustom

interface TsdrawBackgroundPreset {
  type: TsdrawBackgroundType
}

interface TsdrawBackgroundCustom {
  type: 'custom'
  render: (
    ctx: CanvasRenderingContext2D,
    viewport: Viewport,
    width: number,
    height: number
  ) => void
}

​
Zoom-responsive patterns

The preset backgrounds scale with the viewport zoom. Lines, grid, and dots maintain consistent visual density at any zoom level.