Problem
Design a drawing tool where users create shapes, draw freehand, move/resize elements, and (optionally) collaborate in real time.
Discussion areas
- Rendering: Canvas/WebGL vs SVG vs DOM — trade-offs (Canvas scales for many elements; SVG is easy for hit-testing/selection). Often a hybrid.
- Scene model: list/tree of shapes
{ id, type, x, y, w, h, rotation, style, z }; a render loop redraws on change. - Interaction: tool modes (select, rectangle, pen, text), pointer events, hit testing, selection handles, drag/resize/rotate, snapping.
- History: command pattern for undo/redo (store reversible operations or state snapshots).
- Performance: layer/dirty-rect redraws, requestAnimationFrame batching, virtualize off-screen elements, throttle pointermove.
- Persistence: serialize the scene to JSON; export to PNG/SVG.
- Collaboration (advanced): CRDT or OT for concurrent edits, presence cursors, conflict resolution over WebSocket.