Javascript Canvas overlapping images from different layer drawings

Question

I create a board game mimic in html canvas and help needed.

The game is drawing on the main context from multiple layers.

Currently there are 5 players and each player have 2 cards. If player 1 grab one of his cards to above the another player ( for example player 5 ) card it is beneath the card as the image shows.

I tried to use the context.globalCompositeOperation setting to different but it just won't work.

Player1 moves one of his cards

Any ideas how to fix this?

Answer 1

There is no control of z-order on the canvas. You can only clean the content and redraw it again. You may also learn about it here.