Canvas Skill

Canvas Skill

Display HTML content on connected Cybara nodes (Mac app, iOS, Android).

Overview

The canvas tool lets you present web content on any connected node's canvas view. Great for:

• Displaying games, visualizations, dashboards
• Showing generated HTML content
• Interactive demos

How It Works

Architecture

┌─────────────────┐     ┌──────────────────┐     ┌─────────────┐
│  Canvas Host    │────▶│   Node Bridge    │────▶│  Node App   │
│  (HTTP Server)  │     │  (TCP Server)    │     │ (Mac/iOS/   │
│  Port 18793     │     │  Port 18790      │     │  Android)   │
└─────────────────┘     └──────────────────┘     └─────────────┘

1. Canvas Host Server: Serves static HTML/CSS/JS files from canvasHost.root directory
2. Node Bridge: Communicates canvas URLs to connected nodes
3. Node Apps: Render the content in a WebView

Tailscale Integration

The canvas host server binds based on gateway.bind setting:

Bind Mode	Server Binds To	Canvas URL Uses
loopback	127.0.0.1	localhost (local only)
lan	LAN interface	LAN IP address
tailnet	Tailscale interface	Tailscale hostname
auto	Best available	Tailscale > LAN > loopback

Key insight: The canvasHostHostForBridge is derived from bridgeHost. When bound to Tailscale, nodes receive URLs like:

http://<tailscale-hostname>:18793/__cybara__/canvas/<file>.html

This is why localhost URLs don't work - the node receives the Tailscale hostname from the bridge!

Actions

Action	Description
present	Show canvas with optional target URL
hide	Hide the canvas
navigate	Navigate to a new URL
eval	Execute JavaScript in the canvas
snapshot	Capture screenshot of canvas

Configuration

In ~/.cybara/config.json:

{
  "canvasHost": {
    "enabled": true,
    "port": 18793,
    "root": "~/cybara/canvas",
    "liveReload": true
  },
  "gateway": {
    "bind": "auto"
  }
}