A 20M × 20M canvas, one viewport at a time

Pixel Wall is a multiplayer pixel-art canvas on a ±10-million coordinate plane: a 20,000,000 × 20,000,000 space. You can't ship that as one image, and you can't run it as one room either. The interesting problems are all about the viewport.

The viewport is the scope

A client only ever sees a rectangle, so everything live is scoped to that rectangle. The plane is sharded into 10k × 10k chunk rooms, and each client subscribes only to the rooms under its viewport. Pixel and live-cursor broadcasts reach the people who can see them, not every connected socket.

// sketch: the chunk rooms a viewport v covers (chunks are 10k × 10k)
const CHUNK = 10_000;
const rooms: string[] = [];
for (let cx = Math.floor(v.minX / CHUNK); cx <= Math.floor(v.maxX / CHUNK); cx++)
  for (let cy = Math.floor(v.minY / CHUNK); cy <= Math.floor(v.maxY / CHUNK); cy++)
    rooms.push(`chunk:${cx}:${cy}`);

It all runs in one process: a custom Node.js server hosts both Next.js and Socket.IO, over PostgreSQL and Prisma. Every socket is pinned to an identity the server resolves, never one the client asserts, and every write path is gated on it.

Rendering without a library

Off-the-shelf canvas libraries assume a small, finite surface. This one is 20 million pixels on a side and only ever seen through a moving window, so the renderer is hand-written against the raw HTML5 Canvas API, with no drawing library in between.

Charging for space

Space is priced dynamically by viewport zone, with zones keyed to real screen resolutions, and settled through Stripe Payment Intents. A signature-verified, idempotent webhook activates premium codes and cosmetics and, on a refund or dispute, revokes them and removes the placed art. Territory protection is spatial too: alpha-aware, pixel-perfect overlap detection decodes images to raw RGBA with Sharp and fails closed, so paid artwork can't be silently overdrawn.

So the spatial model isn't just a rendering concern; it's the billing primitive too. That coupling is the part I'd design the same way again.

The project page covers the rest of the system: 62 Prisma models, 143 API routes, moderation, and a 21-page admin console. If you're building something real-time with money attached, I'm open to select work.