Deep dive
Start with a sharper job than general design
General interface design tools are an established market, so a new canvas product needs a clear angle. Strong options include whiteboarding and workshops for a specific industry, technical diagrams that stay linked to real systems, floor plans and site layouts, packaging and print design, or a canvas embedded in another product such as a website builder, a slide tool or a manufacturing platform.
The job decides the tools. A diagramming product needs connectors and auto-layout far more than a pen tool; a whiteboard needs sticky notes, voting and timers; a floor plan tool needs real units and measurements. Our product discovery work turns that into a feature list and performance budget before any graphics code is written.
How a browser canvas reaches desktop speed
The canvas is not built from HTML elements. A renderer draws every layer on the GPU through WebGL or WebGPU, and only redraws what changed. A scene graph keeps layers in memory with bounding boxes, so hit-testing and culling skip everything outside the viewport. Heavy computation, such as boolean operations, text layout and vector networks, runs in C++ or Rust compiled to WebAssembly.
WebGPU is now supported in Chrome and Edge, in Safari since version 26, and in Firefox on Windows and Apple Silicon Macs, which makes it a realistic primary path with WebGL as the fallback. Set performance budgets early, for example frame time while panning a large file, and measure them on mid-range laptops and integrated graphics, not only on developer machines.
- Keep the document model separate from the renderer so either can be optimised independently.
- Tile and cache rendered content at each zoom level.
- Move long computations off the main thread with web workers.
Multiplayer without conflicts
Design files are trees of objects with properties, which makes them easier to merge than free text. A common approach is server-authoritative sync: clients apply changes locally and send them to a sync service, which orders them and broadcasts the result, with last-writer-wins at the level of a single property. Two people changing different properties of the same rectangle never conflict.
CRDT libraries such as Yjs or Loro are an alternative, especially if you want offline editing and peer-to-peer features. Either way, presence, live cursors, selection indicators and undo that only reverses your own changes are what make multiplayer feel natural. Version history comes almost for free from the change log, and so do activity feeds that show who changed what while you were away.
Components, handoff and AI
Components with instances and overrides are what make a design tool usable for teams: change the master and every instance updates. Variables and design tokens connect designs to code, and developer handoff lets engineers inspect measurements and copy styles without asking the designer. These features turn a drawing tool into part of a product team's workflow.
AI adds a new layer: generating first drafts of layouts, writing placeholder copy, renaming and organising layers, suggesting components and translating designs into code mapped to a real component library. Keep AI output editable and clearly marked. Our generative AI development team builds these features on current model families.
Enterprise needs and running costs
Design files contain unreleased products, so organisations ask for SSO, granular permissions, audit logs, link-sharing controls, data residency and a SOC 2 report. Plan tenant isolation and audit events in the first release. Link sharing deserves special care: public links to design files are a common source of leaks, so make organisation-only sharing the default and let admins restrict external access.
Running costs are moderate: sync servers, file storage and snapshots, image assets, export rendering and AI inference. Maintenance is roughly 15-20% of the build cost per year, and browser and GPU driver updates make ongoing graphics testing a permanent line item.