All examples

Canvas viewer

A read-only canvas fitted into an SVG image, with every shape and connector listed in reading order for screen readers. No editing code.

Canvas viewer

canvas-viewer · canvas/CanvasViewer

canvas read-only
Props
  • canvas
  • dir
  • label
  • resolveImage
  • trust

Live example loads in an isolated same-origin preview frame.

Source (canvas-viewer/CanvasViewerDemo.svelte) 
<script lang="ts">
import { CanvasViewer } from '@texuli/canvas/viewer';
import { retroBoard } from '../canvas-editor/board.ts';

/** The same retro, read-only: fitted into an image, with its structure as text for screen readers. */
const canvas = retroBoard();
</script>

<div data-example="canvas-viewer">
  <CanvasViewer {canvas} />
</div>