Datastar Canvas Plugin - Infinite Canvas with Pan and Zoom

CDN Installation

Add to your HTML head section

index.html

<script type="importmap">
  {
    "imports": {
      "datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.6/bundles/datastar.js"
    }
  }
</script>
<script type="module" src="https://cdn.jsdelivr.net/gh/ndendic/data-canvas@main/dist/index.js"></script>

Interactive Demo

Try the canvas - drag to pan, scroll to zoom

Pan Controls

Drag canvas or hold Space

Zoom Controls

Scroll or use buttons

Adaptive Grid

Grid scales with zoom

Touch Support

Pinch & two-finger pan

Pan X

0

Pan Y

0

Zoom Level

100%

Controls

Basic Usage

example.html

<div data-canvas-viewport class="w-full h-[500px]">
  <div data-canvas-container>
    <div class="absolute" style="left: 100px; top: 100px;">
      Node 1
    </div>
    <div class="absolute" style="left: 300px; top: 200px;">
      Node 2
    </div>
  </div>
</div>

<!-- Zoom controls -->
<button data-on:click="$canvas_zoom_in()">Zoom In</button>
<button data-on:click="$canvas_zoom_out()">Zoom Out</button>
<button data-on:click="$canvas_reset_view()">Reset</button>

Configuration

Customize canvas behavior with setConfig

config.js

import { setConfig } from './dist/index.js';

setConfig({
  signal: "canvas",          // Signal prefix
  enablePan: true,           // Enable panning
  enableZoom: true,          // Enable zooming
  minZoom: 0.1,              // Minimum zoom level
  maxZoom: 10.0,             // Maximum zoom level
  touchEnabled: true,        // Enable touch gestures
  contextMenuEnabled: true,  // Enable right-click context menu
  spacebarPan: true,         // Hold spacebar + drag to pan
  middleClickPan: true,      // Middle mouse button to pan
  backgroundColor: "#f8f9fa",
  enableGrid: true,
  gridSize: 100,
  gridColor: "#e0e0e0",
  minorGridSize: 20,
  minorGridColor: "#f0f0f0",
});

API Reference

Complete documentation for all features

HTML Attributes

data-canvas-viewport

Defines the viewport container - the visible area that contains the canvas.

data-canvas-container

The canvas container that gets transformed. All content should be inside.

data-canvas

Activates the canvas plugin. Place on body or parent container.

Canvas Signals

$canvas_pan_x / $canvas_pan_y

Current pan position coordinates (read-only)

$canvas_zoom

Current zoom level where 1.0 = 100% (read-only)

$canvas_zoom_in() / $canvas_zoom_out()

Functions to zoom in/out at the viewport center

$canvas_reset_view()

Reset view to default (zoom 1.0, centered)

$canvas_context_menu_x / $canvas_context_menu_y

Canvas coordinates of last right-click

Interaction Controls

Mouse Controls

Left click + drag: Pan (with spacebar)
Middle click + drag: Pan
Scroll wheel: Zoom at cursor
Right click: Context menu

Keyboard Controls

Spacebar + drag: Pan mode
Ctrl/Cmd + Plus: Zoom in
Ctrl/Cmd + Minus: Zoom out
Ctrl/Cmd + 0: Reset zoom

Touch Gestures

Two-finger drag: Pan canvas
Pinch: Zoom at gesture center

Configuration Options

Option	Type	Default	Description
`signal`	string	"canvas"	Signal prefix for all canvas signals
`enablePan`	boolean	true	Enable panning functionality
`enableZoom`	boolean	true	Enable zooming functionality
`minZoom`	number	0.01	Minimum zoom level
`maxZoom`	number	100.0	Maximum zoom level
`touchEnabled`	boolean	true	Enable touch gestures
`contextMenuEnabled`	boolean	true	Enable context menu position tracking
`spacebarPan`	boolean	true	Hold spacebar to enable pan mode
`middleClickPan`	boolean	true	Middle mouse button for panning
`backgroundColor`	string	"#f8f9fa"	Canvas background color
`enableGrid`	boolean	true	Display grid background
`gridSize`	number	100	Major grid line spacing (px)
`gridColor`	string	"#e0e0e0"	Major grid line color
`minorGridSize`	number	20	Minor grid line spacing (px)
`minorGridColor`	string	"#f0f0f0"	Minor grid line color