Real Time Canvas

Real-Time Canvas is a live drawing app built for shows, workshops, and rapid creative prototyping. Every user gets a unique room (shareable URL) to collaborate with a team or integrate seamlessly with TouchDesigner.

How it works (3 steps)

  1. Open the app — your room appears in the UI (copy/share the link).
  2. Draw on a 512×512 canvas — while you draw, live updates stream in real time; on release, a transparent PNG is generated for clean compositing.
  3. Connect TouchDesigner — use a WebSocket DAT to wss://…/ws?room=YOUR_CODE and add a Movie File In TOP (canvas_in) to see the canvas instantly.

Why use it

  • Low latency with isolated rooms.
  • Stylus-friendly and great on touch devices.
  • Direct pipeline to TouchDesigner and media servers.
  • Perfect for participatory performances, installations, and generative visuals.

TouchDesigner: ready to go

  • We include a preconfigured .toe file: websocket1 already points to the WSS endpoint — only change the room. Python callbacks are installed (receive live JPEG frames, final PNG, and the prompt). A Movie File In TOP (canvas_in) and a Text component to display the prompt.
    • websocket1 already points to the WSS endpoint — only change the room.
    • Python callbacks are installed (receive live JPEG frames, final PNG, and the prompt).
    • A Movie File In TOP (canvas_in) and a Text component to display the prompt.
  • Automatic saving: when an image arrives, the script creates/updates a folder next to your .toe (by default ./inbox/) and writes the canvas image there. If that path isn’t writable, it falls back to Documents/Real-Time-Canvas or the system temp folder.

More info & discussion

We opened a post with details and a discussion area: https://mappingon.es/el-futuro-de-la-creatividad-arte-y-tecnologia/