The Iseeshop Collaborative Art Gallery is a collection of user-submitted digital illustrations drawn directly on the web application. Using Svelte reactive canvas components, visitors create and share drawings that are persisted in a Supabase backend.
This project serves as a showcase of real-time client-side rendering, smooth stroke vector serialization, and real-time database synchronization.
The core drawing engine leverages lightweight HTML5 canvas bindings with custom Svelte stores to manage stroke drawing vectors and rendering. This provides smooth, low-latency drawing interactions even on mobile devices.
1. Stroke Capture: Individual drawing paths are serialized into JSON coordinates. 2. Image Rasterization: On saving, Svelte rasterizes the canvas vectors into a base64 PNG data URL. 3. Database Insertion: The drawing metadata (likes, title, timestamp) and base64 raster data are saved to a Postgres table in Supabase. 4. Gallery Retrieval: The gallery pulls these base64 images directly, sorting them by popular votes (likes) and rendering them inside responsive grid cards.
