Props

Static Props

Static properties are set during initialization and cannot be modified later.

container

• Type: HTMLElement | null
• Default: null
• Parent element used to determine canvas size. If null, it uses the viewport.

const canvas = new Canvas({
  container: document.getElementById('container'),
});

append

• Type: boolean
• Default: true
• If true, appends the canvas to the container. Ignored if container is null.

const canvas = new Canvas({
  append: false,
});

resizeOnInit

• Type: boolean
• Default: true
• Automatically adjusts canvas size on initialization.

const canvas = new Canvas({
  resizeOnInit: true,
});

resizeOnRuntime

• Type: boolean
• Default: false
• Enables dynamic resizing based on viewport or container changes.
• Disabled by default

const canvas = new Canvas({
  resizeOnRuntime: true,
});

viewportTarget

• Type: 'width' | 'height' | 'both' | 'onlyWidth' | 'onlyHeight' | 'any' | 'trigger'
• Default: 'any'
• Defines which dimension(s) should trigger a resize. Learn more

const canvas = new Canvas({
  viewportTarget: 'any',
});

resizeDebounce

• Type: number
• Default: 0
• Debounce time (ms) for resize handling.

const canvas = new Canvas({
  resizeDebounce: 0,
});

Mutable Props

Mutable properties can be updated at runtime using .updateProps().

Adaptive props

To apply different values by viewport or device, use Responsive with this component as the source. Props will update automatically when breakpoints change.

width

• Type: 'auto' | number
• Default: 'auto'
• Canvas width. Use 'auto' to match the container's width.

const canvas = new Canvas({
  width: 'auto',
});

// change value
canvas.updateProps({
  width: 100,
});

height

• Type: 'auto' | number
• Default: 'auto'
• Canvas height. Use 'auto' to match the container's height.

const canvas = new Canvas({
  height: 'auto',
});

// change value
canvas.updateProps({
  height: 100,
});

dpr

• Type: 'auto' | number
• Default: 'auto'
• Device Pixel Ratio (DPR). Use 'auto' for automatic detection.

const canvas = new Canvas({
  dpr: 'auto',
});

// change value
canvas.updateProps({
  dpr: 100,
});