function drawBalls(positions) {
  // draw 'me'
  let me = replay_data.me;
  let player = positions[me];
  // what team?
  let team = Array.isArray(player.team) ? player.team[frame]
                                        : player.team;
  let center_x = context.canvas.width / 2;
  let center_y = context.canvas.height / 2;
  let player_x = center_x - TILE_SIZE / 2;
  let player_y = center_y - TILE_SIZE / 2;
  if (!player.dead[frame]) {
    // draw own ball with or without spin
    if (!options.spin || typeof player.angle === 'undefined') {
      context.drawImage(textures.tiles,
        13 * TILE_SIZE, (team == 1 ? 7 : 8) * TILE_SIZE,
        TILE_SIZE, TILE_SIZE,
        player_x, player_y,
        TILE_SIZE, TILE_SIZE);
    } else {
      context.translate(center_x, center_y);
      context.rotate(player.angle[frame]);
      context.drawImage(textures.tiles,
        13 * TILE_SIZE, (team == 1 ? 7 : 8) * TILE_SIZE,
        TILE_SIZE, TILE_SIZE,
        -20, -20,
        TILE_SIZE,
        TILE_SIZE);
      context.rotate(-player.angle[frame]);
      context.translate(-center_x, -center_y);
    }

    drawPowerups(me, player_x, player_y, positions);
    drawFlag(me, player_x, player_y, positions);
    let name = Array.isArray(player.name) ? player.name[frame]
                                          : player.name;
    drawName(name, player.auth[frame], player_x, player_y);
    drawDegree(player.degree[frame], player_x, player_y);
    if (player.flair) {
      drawFlair(player.flair[frame], player_x, player_y);
    }
  }
  ballPop(positions, me)
  rollingBombPop(positions, me)

  // draw other balls
  for (let j in positions) {
    if (!j.startsWith('player')) continue;
    if (j == me) continue;
    let player = positions[j];
    let x = player.x[frame] - positions[me].x[frame] + context.canvas.width / 2 - TILE_SIZE / 2;
    let y = player.y[frame] - positions[me].y[frame] + context.canvas.height / 2 - TILE_SIZE / 2;
    if (!player.dead[frame] && player.draw[frame]) {
      if (frame == 0 || player.draw[frame - 1] == true) {
        if ((player.dead[frame - 1] &&
             player.x[frame] != player.x[frame - replay_data.fps]) ||
             !player.dead[frame - 1]) {
          let team = Array.isArray(player.team) ? player.team[frame]
                                                : player.team;

          // draw with or without spin
          if (!options.spin || typeof player.angle === 'undefined') {
            context.drawImage(textures.tiles,
              (team == 1 ? 14 : 15) * TILE_SIZE, 0,
              TILE_SIZE, TILE_SIZE,
              x, y,
              TILE_SIZE, TILE_SIZE);
          } else {
            context.translate(
              player.x[frame] - positions[me].x[frame] + context.canvas.width / 2,
              player.y[frame] - positions[me].y[frame] + context.canvas.height / 2);
            context.rotate(player.angle[frame]);
            context.drawImage(textures.tiles,
              (team == 1 ? 14 : 15) * TILE_SIZE, 0,
              TILE_SIZE, TILE_SIZE,
              -TILE_SIZE / 2, -TILE_SIZE / 2,
              TILE_SIZE, TILE_SIZE);
            context.rotate(-player.angle[frame]);
            context.translate(
              -(player.x[frame] - positions[me].x[frame] + context.canvas.width / 2),
              -(player.y[frame] - positions[me].y[frame] + context.canvas.height / 2));
          }

          drawPowerups(j, x, y, positions);
          drawFlag(j, x, y, positions);
          let name = Array.isArray(player.name) ? player.name[frame]
                                                : player.name;

          drawName(name, player.auth[frame], x, y);
          drawDegree(player.degree[frame], x, y);
          if (typeof player.flair !== 'undefined') {
            drawFlair(player.flair[frame], x, y);
          }
          rollingBombPop(positions, j);
        }
      }
    }
    ballPop(positions, j);
  }
}