System Design Guide

architectcritical Relevance16 min read

Design Figma Collaborative Canvas

Building a high-performance vector graphics editing editor rendering thousands of nodes, with WebGL canvas rendering and WebSocket cursor synchronization.

Architecture Focus:

WebGL CanvasrequestAnimationFrame rendering loopsBinary payload synchronization

1. Problem Statement

Design a collaborative vector editing editor capable of rendering thousands of shapes at 60fps, supporting zoom/pan tools, and syncing mouse positions.

2. Business Context & User Friction

Visual designers demand absolute rendering precision and zero lag. Canvas rendering frame drops directly degrade user experience.

3. Requirements Matrix

Functional Requirements

Render vector canvas displaying shapes, lines, and text.
Support selection, dragging, scaling, and alignment of vectors.
Sync collaborator mouse cursor positions in real-time.

Non-Functional Requirements

Performance

Consistent 60fps canvas render loops when pan/zooming.
Under 20ms cursor positions sync updates.
Low memory footprints when loading complex projects.

Scalability

Support canvas layout hierarchies scaling to 10,000+ vector shapes.
Throttle mouse coordinates to prevent WebSocket floods.

Accessibility (a11y)

Accessible sidebar inspectors providing alternative controls.
Keyboard vector alignment shortcuts.

Security

Lock specific layers edits permissions.
Sanitize image imports files.

Reliability & Failover

Save drawings drafts to IndexedDB to block data loss.
Graceful fallback to standard canvas if WebGL initialization errors.

Observability

Track canvas FPS drops.
Log WebGL context losses.

4. Core User Flows

Drawing a shape collaboratively

Designer selects shape tool, clicking canvas workspace.
App adds vector node to tree, WebGL redraws screen.
Local action serializes to binary buffer, syncing to WebSockets.
Peer clients receive buffer, WebGL redraws their canvases.

5. High-Level Design & Layers

The editor structures vector shapes as hierarchical tree nodes, rendering them inside a WebGL or 2D canvas at 60fps, and syncing states using binary WebSocket feeds.

Frontend Layers

UI Layer: Toolbox, SidebarLayersTree, WebGLCanvas, InspectorPanel.
State/Render Layer: Canvas rendering loops, coordinate mapping engines.
Network Layer: Binary WebSockets client, IndexedDB adapter.

Major Components

WebGLRenderEngine: Renders vector buffers to canvas viewport, coordinating zoom/pan translation.
CursorTracker: Captures mouse coordinates, throttling updates before socket broadcasts.

Data Flow Pipelines

1. User clicks and drags shape markers.
2. Coordinate mapping converts screen points to vector coordinates.
3. WebGLRenderEngine triggers redraw.
4. WebSocket client sends coordinates updates.

6. Component Architecture & State Boundaries

Component	Responsibility	State Owned	Dependencies
CanvasShell	Coordinates layers inspectors, active toolbox states, and maps canvases overlays.	Layer tree, zoom factor	WebGLRenderEngine, CursorTracker

7. State Management

Local UI State

Active select shapes IDs
Canvas zoom coordinates

Server Query Cache State

Workspace permissions info
Project metadata list

Global/Shared State

Active project ID info

Real-Time & Sync State

Peers cursor positions map
Layer changes stream

8. API Contracts Design

GET/api/v1/projects/:id/layers

Get Project Shapes

Purpose: Download project layer trees specs.

Sample Response:

{
  "project": {
    "id": "p1",
    "layers": [
      {
        "id": "l1",
        "type": "rect",
        "x": 10,
        "y": 20
      }
    ]
  }
}

9. Caching Strategy

Browser/HTTP Cache

IndexedDB stores projects drafts.
Service worker caches editor assets.

Edge CDN Caching

Edge cache libraries assets.

Application Cache

Cache off-screen shape coordinates in memory.

Invalidation Policies

Invalidate layers caches on project reloads.

10. System Strategies Checklist

Performance Strategy & Budgets

WebGL rendering layer instead of heavy DOM trees.
Throttle mouse cursor coordinate transmissions to 30ms.
Implement off-screen canvas rendering.

Inclusive Accessibility Design

Accessible sidebar inspector panels with screen-reader overlays.
Aria-live alerts for project save updates.

Security Safeguards & Risks

Authorize coordinate edits per layer boundaries.
Audit asset file uploads.

Telemetry & Production Observability

Monitor canvas FPS during pan and zooms.
Trace WebGL memory allocations.

Graceful Failure & Resilience

Automatically save drafts locally on socket disconnects.
Show warning overlays if browser loses WebGL context.

Deployment, Rollout & CDN topologies

CSR client editor deployed on edge CDNs.
WebSockets links routed through load balancers.

11. Architectural Decisions & Tradeoffs

Decision: WebGL/2D Canvas rendering vs SVG DOM elements

Benefit:

Can render 10,000+ items at 60fps without DOM bottlenecks.

Drawback:

Breaks standard DOM accessibility and testing library tooling.

When To Use: When building high-volume vector graphics editors.

12. Interview Answer Framework

How to structure your defense of this architecture during a 45-minute technical system design session:

1. Opening Pitch

Explain that vector canvases require high performance rendering. Contrast HTML5 Canvas/WebGL with SVG DOM limits.

2. Requirement Clarification Queries

Do we need support for offline edits sync?
Should we support image layers uploads?

3. Core High-Level Architecture Block

Propose a CanvasShell coordinating toolboxes, WebGLRenderEngine, and WebSocket cursors.

4. Strategic Deep Dive Areas

Explain canvas rendering loops (requestAnimationFrame).
Detail coordinate systems translations (screen space to canvas space).

5. Summary & Defensive Tradeoffs

Conclude by highlighting memory optimizations (garbage collection bounds, binary payloads).

13. Common Pitfalls & Extension Questions

Candidate Mistakes to Avoid

Using SVG elements for heavy canvas layers, causing browser crashes.
Broadcasting mouse movements on every scroll change, flooding sockets channels.

Interviewer Follow-ups / Extensions

How do you implement snapping coordinates calculation on high zoom levels?
How would you handle undo/redo stacks inside local memory?

Previous ArticleGoogle Docs Collaborative Editor

All Case Studies

Next ArticleSlack/Microsoft Teams Frontend