HTML5 Canvas Multiplayer in Vanilla JavaScript — No Server, No Build

Q: Do I need npm or a bundler?

No. Use the script tag (MP.Multiplayer) or import the ES module straight from the CDN.

why

The smallest possible online game

This is the whole file. Save it as index.html, replace the key with the one POST /v1/games returns, open it in two tabs. Upload it to any static host — GitHub Pages, Netlify, itch.io — and it works for players anywhere.

code

A complete Vanilla JavaScript integration

<!doctype html>
<canvas id="c" width="800" height="600"></canvas>
<script src="https://multiplayerapi.com/sdk/mp.min.js"></script>
<script>
(async () => {
  const ctx = document.getElementById('c').getContext('2d');
  const mp = new MP.Multiplayer({ key: 'mp_pk_...' });
  await mp.login();
  const room = await mp.quickmatch({ max_players: 8 });

  const me = { x: 400, y: 300 }, others = {}, keys = {};
  onkeydown = (e) => keys[e.key] = true;
  onkeyup = (e) => keys[e.key] = false;

  room.on('peer', (p, from) => others[from] = p);
  room.on('members', (m) => {
    const alive = new Set(m.map((x) => x.account_id));
    for (const id in others) if (!alive.has(id)) delete others[id];
  });
  setInterval(() => room.send(me), 50);

  (function loop() {
    me.x += ((keys.ArrowRight|0) - (keys.ArrowLeft|0)) * 4;
    me.y += ((keys.ArrowDown|0) - (keys.ArrowUp|0)) * 4;
    ctx.fillStyle = '#0c0d10'; ctx.fillRect(0, 0, 800, 600);
    ctx.fillStyle = '#5aa6ff';
    for (const o of Object.values(others)) ctx.fillRect(o.x - 10, o.y - 10, 20, 20);
    ctx.fillStyle = '#c8f135'; ctx.fillRect(me.x - 10, me.y - 10, 20, 20);
    requestAnimationFrame(loop);
  })();
})();
</script>

architecture

What goes where

Channel	Call	Delivery	Use it for
Direct	`room.send(data)`	peer-to-peer, best effort, zero server cost	positions, aim, animation
State	`room.set(path, value)`	server-validated, kept for the match, reaches late joiners	health, score, whose turn
Events	`room.emitEvent(topic, data)`	ordered, guaranteed, not persisted	chat, rematch, one-shots

Prefer ES modules? import { Multiplayer } from 'https://multiplayerapi.com/sdk/mp.esm.min.js'.
Invite friends to a specific room with mp.create() and share room.code; they join with mp.join(code).
The SDK is under 7 KB gzipped: it will not show up in your load time.