Scratchpad

Scratchpad is a real-time collaborative drawing canvas — a multiplayer whiteboard where strokes sync instantly across every connected client, with a gesture-recognition layer that turns freehand input into clean shapes and diagrams. It runs on a Paper.js vector canvas, a Go WebSocket backend, and a Nuxt 4 client.

Why

Drawing tools tend to sit at two extremes: dumb canvases that only push pixels, or heavyweight design suites with a learning curve. Scratchpad aims for the middle — a fast, low-latency canvas (60fps target) that two people can share over a link, plus a gesture system that reads intent: sketch a rough box, get a clean rectangle. The goal is a tool that feels immediate and then gets out of the way.

How it works

Canvas. Nuxt 4 + Vue 3 with a Paper.js vector engine. Four coordinate spaces — screen → viewport → canvas → Paper.js — with a fixed transform chain and DPI-aware scaling. Performance is enforced by rule: 16ms draw throttle (60fps), region-only redraws, separate layers (grid / drawing / UI / debug), and a 50-step history backed by shallow refs.
Real-time sync. A Go + Gin + `gorilla/websocket` server (port 3041) broadcasts strokes to all clients and can export the live drawing as SVG (`GET /pen/svg`). The client auto-reconnects with exponential backoff (1s → 30s).
Gesture recognition. Define gesture sets, train them through a wizard, and score incoming strokes against them — backed by per-shape detection modules that fit Béziers and snap freehand to shapes and diagrams.
Persistence & auth. Client-side IndexedDB (`idb-keyval`) auto-saves the canvas with manual snapshot save/restore; Google OAuth handles accounts.

Status

Live in production at pad.exesiv.dev. The most recent stretch of work was an architecture-hardening pass rather than new features — see the devlog for the details. Scope is deliberately bounded: ML/OCR/handwriting recognition and camera tracking are explicitly out of scope.

Why

How it works

Status

Links