Canvas System Architecture

Canvas System Architecture An architecture diagram generated by Archify. Web Browser · HTML5 Canvas UI · Architecture component · Live Client Web Browser HTML5 Canvas UI Live Client Cloudflare Pages · Static Assets CDN · Cloudflare Global Edge Platform · Cloudflare Cloudflare Pages Static Assets CDN Pages Functions · functions/[[path]].js · Cloudflare Global Edge Platform · Cloudflare Pages Functions functions/[[path]].js Worker API · canvas-rishirajpal-api · Cloudflare Global Edge Platform · Cloudflare Worker API canvas-rishirajpal-api Catalogue DO · Registry & TTL Alarms · Cloudflare Global Edge Platform · SQLite Catalogue DO Registry & TTL Alarms Board DO · SQLite Grid & WS Hub · Cloudflare Global Edge Platform · SQLite Board DO SQLite Grid & WS Hub Local Browser · localhost:8080 · Local Development Sandbox · Dev Client Local Browser localhost:8080 Dev Client Go Local Server · cmd/canvas (SSE) · Local Development Sandbox · Go Go Local Server cmd/canvas (SSE) Disk Storage · data/*.json files · Local Development Sandbox Disk Storage data/*.json files static assets HTTP & WS CANVAS_API lookup dispatch & WS HTTP & SSE JSON state Cloudflare Global Edge Platform Local Development Sandbox Legend Frontend Backend Database Cloud

Cloudflare Edge

  • • Static HTML5, CSS, and JS served by global Cloudflare Pages CDN
  • • Pages Functions reverse-proxy API calls and upgrade WebSocket connections

Durable Objects & SQLite

  • • Catalogue DO handles board discovery, 168-hour expiration, and midnight IST rotation
  • • Board DO coordinates 200x200 pixel state, atomic generations, and real-time WebSocket sync

Local Server Mode

  • • Standard Go binary (cmd/canvas) reproduces full API and static UI offline
  • • Stores board state in data/ directory and streams changes via Server-Sent Events