Sketchy
A hand-drawn-feel canvas for wireframes, diagrams, and quick visual thinking. Fast, distraction-free, and genuinely satisfying to draw with.
Sketchy is a browser-based drawing tool that combines the immediacy of a whiteboard with a deliberate hand-drawn aesthetic powered by Rough.js. The Canvas API rendering loop is tuned for smooth, low-latency input — shapes appear as you draw them, not after. WebSockets enable real-time multiplayer collaboration, with board state persisted to PostgreSQL so sessions survive page refreshes. The interaction model is intentionally minimal: a small toolbar, a clean canvas, and shapes that feel like they were drawn by hand rather than generated by software.
Why I built this
I'd used Excalidraw enough to be curious about how it actually works under the hood. Building a canvas drawing tool from scratch seemed like the fastest way to understand rendering performance, input latency, and scene management at a level you can't get from reading code.
Use case
Fast wireframes, architecture diagrams, and visual brainstorming. The hand-drawn aesthetic keeps things loose and collaborative — it signals that ideas are still in flux, which removes the pressure that comes with polished diagrams.
What I learned
Canvas performance is all about minimizing unnecessary redraws. I learned to track dirty regions, batch paint calls, and use requestAnimationFrame correctly — and how each of those decisions compounds. A 5ms unnecessary repaint feels fine until you have 50 shapes and a 60Hz loop.
Where I got stuck
Hit testing — determining which shape the cursor is over — sounds trivial until shapes overlap, have transparent fills, or sit on top of each other in non-obvious z-order. Naive bounding-box iteration breaks down fast. Building a proper scene graph with per-shape hit detection was the most technically demanding part of the project.
Stack used
TypeScript
React
Next.js
WebSockets
PostgreSQLRough.js
Tailwind CSS
Canvas API