Designing a World Cup 2026 Draft Wheel Game with Canvas, Web Audio, and Cloudflare Workers

Every four years, the football world unites for the FIFA World Cup. In a group of 8 friends, we decided to make the 2026 tournament extra interesting by running a fantasy draft. We drafted 48 teams total (6 teams per player), where each team earns points based on their real-world performance (wins, draws, and advancing through knockout stages).

To run this draft in a fun, theatrical way, I built a custom, real-time 2026 World Cup Draft Wheel Game.

In this article, we'll dive into the technical details of building the drafting mechanics, physics-based spinning wheels with HTML5 Canvas, real-time audio synthesis with the Web Audio API, and the Cloudflare Workers sync engine.

---

1. Drafting Mechanics: The Dual-Wheel System

To ensure a fair draft, the system uses a Dual-Wheel System:

• Wheel 1: Player Selection: Decides who gets to pick next.
• Wheel 2: Team Assignment: Randomly assigns them one of the remaining, undrafted countries.

Once a player lands on a team, they "Claim" the draft pick, which adds the team to their roster, locks it from being drafted by anyone else, and transitions the app state back to spinning the player wheel.

---

2. Drawing and Animating the Wheels with HTML5 Canvas

Instead of relying on heavy CSS transitions or massive GIF animations, the wheels are drawn dynamically on an HTML5 element using a custom physics engine.

Deceleration & Friction Physics

To make the wheel spin realistic, we apply angular velocity and a deceleration factor (friction). We want the wheel to spin for a configurable duration (e.g. 6.0 seconds) and speed factor. We calculate the exact friction coefficient dynamically so the spin stops precisely on the target duration:

spin() {
  this.isSpinning = true;
  const baseVelocity = Math.random() * 0.2 + 0.38;
  this.angularVelocity = baseVelocity * state.spinSpeedFactor;
  
  // Calculate friction dynamically for target duration (assuming 60 FPS)
  const targetDurationFrames = 60 * state.spinDuration;
  const ratio = 0.001 / this.angularVelocity;
  this.friction = Math.exp(Math.log(ratio) / targetDurationFrames);
  
  this.animate();
}

Every frame, the canvas clears, draws each colored slice, rotates the context, and writes the country name. When the angular velocity drops below 0.001, the wheel halts and highlights the selected slice in gold.

---

3. Web Audio API Synthesis: Light and Lag-Free SFX

To provide instant audio feedback without loading large MP3 assets, I implemented a Web Audio API fallback synthesizer. When the wheel spins, it triggers short ticks as pins click past the indicator pointer. When it stops, it plays a whistle and crowd cheer.

Here is the exact code for synthesizing a crowd cheer using white noise and bandpass filters:

playCheer() {
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const bufferSize = ctx.sampleRate * 2.5; // 2.5 seconds
  const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
  const data = buffer.getChannelData(0);
  
  // Fill buffer with random white noise
  for (let i = 0; i < bufferSize; i++) {
    data[i] = Math.random() * 2 - 1;
  }
  
  const noise = ctx.createBufferSource();
  noise.buffer = buffer;
  
  const filter = ctx.createBiquadFilter();
  filter.type = 'bandpass';
  filter.frequency.setValueAtTime(900, ctx.currentTime);
  filter.Q.setValueAtTime(1.2, ctx.currentTime);
  
  const gain = ctx.createGain();
  gain.gain.setValueAtTime(0, ctx.currentTime);
  gain.gain.linearRampToValueAtTime(0.18, ctx.currentTime + 0.4); // Fade in
  gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 2.5); // Decay
  
  noise.connect(filter);
  filter.connect(gain);
  gain.connect(ctx.destination);
  
  noise.start();
  noise.stop(ctx.currentTime + 2.5);
}

This creates a realistic "roar" of a stadium crowd purely out of code!

---

4. Real-time Live State Cloud Syncing

During the draft, the host runs the board on a laptop or projector, while players watch the live results update on their own devices.

To enable this, the app synchronizes its state to a Cloudflare Worker API via a simple POST request after every state transition:

• POST /api/draft: Synchronizes the JSON state containing the list of players, draft results, and current wheels state. It is protected by a password check.
• GET /api/draft: Fetches the current draft status. Other player devices poll this endpoint to display the draft boards in real-time.

async function pushToCloud() {
  const url = 'https://worldcup-draft-2026.thomasrobb5.workers.dev';
  try {
    await fetch(${url}/api/draft, {
      method: 'POST',
      headers: { 
        'Content-Type': 'application/json',
        'X-Draft-Password': 'Tavoo'
      },
      body: JSON.stringify(state)
    });
  } catch (err) {
    console.error("Cloud push failed:", err);
  }
}

---

5. Live Scoreboard Integration via GitHub

A great draft game doesn't end when the selection phase is over. To track scores throughout the tournament, the app fetches real-time match results directly from openfootball's GitHub repository:

https://raw.githubusercontent.com/openfootball/worldcup.json/master/2026/worldcup.json

The system automatically parses the matches and calculates player scores based on the tournament rule settings:

This makes the dashboard a living, breathing scoreboard during the entire month of the tournament!

Conclusion

By combining the lightweight rendering of HTML5 Canvas, real-time Web Audio synthesis, and Cloudflare Workers, we built a highly interactive draft experience that keeps friends connected throughout the tournament.

Game on!