mocanvas

v4.0.1

An infinite canvas that keeps up

A canvas SDK for the web with a familiar editor API and a Rust and WebAssembly engine underneath. Geometry, hit-testing, culling and tessellation run in WebAssembly and write GPU buffers straight into linear memory.

Why this exists

We built products on tldraw, and it is a genuinely excellent library — the API model here is shaped after it because we think they got that design right. What we ran out of was headroom: our canvases grew past the point where a DOM-and-SVG renderer kept up, and the work we needed off the main thread had nowhere to go.

So mocanvas is that same shape of API with a different engine underneath, built so an existing app can come across rather than be rewritten.

Performance

Median milliseconds against tldraw 5.4, lower is better. mocanvas scales: it wins by about 3× on building a scene at every size, and the interaction gap opens as the scene grows. On small scenes tldraw’s renderer is ahead, which is the row we left in.

Creating shapes

1,000 shapes

15.1 ms

37.8 ms

2.5× faster

5,000 shapes

40.1 ms

120.0 ms

3.0× faster

20,000 shapes

134.2 ms

433.2 ms

3.2× faster

Dragging a selection

1,000 shapes

33.0 ms

25.1 ms

tldraw ahead

5,000 shapes

116.6 ms

150.0 ms

1.3× faster

20,000 shapes

400.0 ms

858.4 ms

2.1× faster

Measured on an Apple M3 Pro in headless Chromium with no hardware GPU, so Chromium fell back to software rasterisation — which penalises our WebGL2 renderer far more than a DOM one, and makes the interaction figures close to a worst case for mocanvas. Default settings on both sides. It is our own benchmark of our own library; the method and the rest of the caveats are in the docs.

mocanvas is built by Symbio. Free for non-commercial, non-profit and development use; commercial use needs an agreement. Not affiliated with or endorsed by tldraw.

mocanvas@symbio.agency