Player object isnt being drawn on canvas using a for in loop

If i draw the player on my canvas just using player.draw(); everything works fine. But now im trying to push it online so that i may be able to play with friends. This is the instance of my player class , not really sure what im not doing correctly, can yall tell me what im doing wrong exactly, i want a new instance of the player to draw in
My player instance with my socket.on function 
const players = {};

socket.on("updatePlayers", (backendPlayers) => {
  for (const id in backendPlayers) {
    const backendPlayer = backendPlayers[id];
    if (!players[id]) {
      players[id] = new Player(backendPlayer.x, backendPlayer.y);
    }
  }
  console.log(players);
});

const player = new Player({
  color: "red",
  imageSrc: "/playerOne/idle/idleAnimation.png",

  collisionBlocks: CollisionBlocks,

  frameRate: 5,
  frameBuffer: 6,
  animations: {
    idleRight: {
      frameRate: 5,
      frameBuffer: 6,
      loop: true,
      imageSrc: "/playerOne/idle/idleAnimation.png",
    },
    idleLeft: {
      frameRate: 5,
      frameBuffer: 5,
      loop: true,
      imageSrc: "/playerOne/idle/idleAnimationLeft.png",
    },
    runRight: {
      frameRate: 6,
      frameBuffer: 5,
      loop: true,
      imageSrc: "/playerOne/runAnimations/runRight.png",
    },
    runLeft: {
      frameRate: 6,
      frameBuffer: 4,
      loop: true,
      imageSrc: "/playerOne/runAnimations/runLeft.png",
    },
    jumpLeft: {
      frameRate: 3,
      frameBuffer: 2,
      loop: true,
      imageSrc: "/playerOne/jump/jumpLeft.png",
    },
    jumpRight: {
      frameRate: 3,
      frameBuffer: 2,
      loop: true,
      imageSrc: "/playerOne/jump/jumpRight.png",
    },
    jumpFallRight: {
      frameRate: 1,
      frameBuffer: 1,
      loop: true,
      imageSrc: "/playerOne/jump/jumpFallRight.png",
    },
    jumpFallLeft: {
      frameRate: 1,
      frameBuffer: 1,
      loop: true,
      imageSrc: "/playerOne/jump/jumpFallLeft.png",
    },
    attackRight: {
      frameRate: 3,
      frameBuffer: 5,
      loop: true,
      imageSrc: "/playerOne/attack/attack1Right.png",
    },
    attackLeft: {
      frameRate: 3,
      frameBuffer: 5,
      loop: true,
      imageSrc: "/playerOne/attack/attack1Left.png", // Ensure this path is correct and the image exists
    },
    jumpAttackRight: {
      frameRate: 3,
      frameBuffer: 3,
      loop: true,
      imageSrc: "/playerOne/jumpAttack/jumpAttackRight.png", // Ensure this path is correct and the image exists
    },
    jumpAttackLeft: {
      frameRate: 3,
      frameBuffer: 3,
      loop: true,
      imageSrc: "/playerOne/jumpAttack/jumpAttackLeft.png", // Ensure this path is correct and the image exists
    },
    hurtRight: {
      frameRate: 3,
      frameBuffer: 3,
      loop: false,
      imageSrc: "/playerOne/hurtAnimation.png", // Ensure this path is correct and the image exists
    },
    hurtLeft: {
      frameRate: 5,
      frameBuffer: 1,
      loop: false,
      imageSrc: "/playerOne/hurtAnimationLeft.png", // Ensure this path is correct and the image exists
    },
  },
}); and this is my gameloop 
function gameloop(timestamp) {
  const elapsedTime = timestamp - lastTime;

  if (elapsedTime > interval) {
    lastTime = timestamp - (elapsedTime % interval);

    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw background elements
    bg.draw();
    cloudBig.update();
    cloudBig2.update();
    palmTree.draw();
    palmTree2.draw();

    palmTreeSide.draw();
    palmTreeSide2.draw();

    backgroundLevel1.draw();
    water.draw();
    waterBigTwo.draw();
    waterSmall.draw();
    waterSmallTwo.draw();

    // Draw the p1Symbol
    playerUpdate();
    p1Symbol.draw();
    p1Symbolp.draw();
    p2Symbol.draw();
    p2Symbolp.draw();

    enemy.enemyMovement();
    player.movement();

    // Update hurtboxes
    player.updateHurtbox();
    enemy.updateHurtbox();
    // floatingKeyEffect.draw();

    floatingKey.draw();
    doorOpen.draw();
    // Draw game objects
    player.update();
   
    for (const id in players) {
      const player = players[id];
      player.draw();
    }    
    enemy.update();
    enemy.draw();

    //    CollisionBlocks.forEach(collisionBlock => {
    //   collisionBlock.draw();
    // });

    // Check collisions
    attackCollision();
    enemyAttackCollision();
  }

  // Request the next frame
  window.requestAnimationFrame(gameloop);
}

// Start the resource loading process
resourceLoader.loadResources(() => {
  // Start the game loop once all resources are loaded
  window.requestAnimationFrame(gameloop);
});