It does not look very good that when we deal more cards from the remainder pile they all suddenly appear. If you blink you miss it. It would be much better if there was a small time interval between the appearance of each card.
Similarly, when a suit is complete it just vanishes and a number in the right hand column is incremented. I will show how to make the cards fly across to that column instead.
For both of these effects we need a small, repeated, time delay. In JavaScript you cannot simply made the program pause in mid-function. And if you did you would not see any change on the screen. The things we draw on our canvas only become visible when the current sequence, triggered by some event, comes to an end. The drawing operations really happen in a hidden copy of the canvas which switches to become the displayed version when the program ends.
Instead we need to make the system (browser) restart the program by calling one of our functions after a specified interval. That is the purpose of JS's setTimeout (function_name, millisecond_interval). A slight problem with this is that the browser cannot pass any parameters into the function it invokes. Just as for the mouse events we will need to have a data object that the function can read each time it runs. I will call that object GAME.animData.
One other thing to point out before we start animating is that we will need a way to stop the player interacting while the animation is proceeding. I will have a boolean GAME.uiPaused, initialised to false in run() but temporarily true during animations. All our mouse and key event listeners should return immediately if this is true. For example:
function onKeydown (e)
{ if (GAME.uiPaused) return;
if (e.key === "z" && e.ctrlKey) undo ();
// else if (e.key === "g") convert ();
}