Mouvement pions sur un Canvas

Bonsoir,

Je réalise actuellement un jeu vidéo de type jeu de plateau en langage web. Je suis en train de gérer le déplacement de pions sur un Canvas (il peut y a avoir 2, 4 ou 6 pions sur le plateau). J'ai réalisé une méthode qui permet déplacer les pions 60 fois par seconde en fonction d'un point de départ et un point d'arrivée sur le plateau (coordonnées x et y).

J'en viens à mon problème : lorsque je déplace un pion qui passe par dessus un autre pour se diriger sur une case suivante, le pion du dessous est supprimé. En effet, actuellement, je supprime à chaque mouvement du pions un rectangle de la taille du pion à sa position précédente. Cela a pour effet (avec la méthode clearRect : <exemple suivant>

contextCanvasBoard.clearRect(
      currentX, //position en X dans le Canvas du pion
      currentY, //position en Y dans le Canvas du pion
      currentSquarePawn[joueurCourant][0].width, //représente la largeur du pion du joueur actuel
      currentSquarePawn[joueurCourant][0].height //hauteur du pion
    );

de supprimer tous les éléments se trouvant sur le Canvas à ce moment donc aussi le ou les pions sur lesquels on passe).

Je ne sais donc pas comment faire :
- soit redessiner chaque élément du canvas (tous les pions du plateau) 60 fois par seconde lors du déplacement d'un pion
- soit superposer 6 canvas les uns par dessus les autres, un pour chaque pion qui résoudrait le problème.

Si vous avez un conseil à me donner ou une meilleure solution je suis preneur, je vous remercie.

Bonne soirée,

Théo
Macintosh / Safari 16.3