Canvas performance tileset rendering

Question

I'm doing multiplayer game in canvas. I have one canvas for ground, second for player and third for map element above player. Player field of view is much smaller than map so I re-render map when player move every 2px of all 32px.

I recognized that i need to render other players in map canvas, because when player move for example right then other players stutter i their places in 2px margin because of player camera move.

When I put other players in ground canvas then it's all working, but the performance is very bad. Should I put other players in another canvas and transform them separately? I'm rendering only visible for player tiles, but maybe I need to render the whole ground at start and every move display only visible for player tiles? There is a video how it's looking at this moment.

Answer 1

I would try drawing a larger section to a buffer canvas and using drawimage to draw it onto the main canvas each turn.

ie map (buffer) canvas is 1600 * 1200 screen is 800 * 800 view center x is vx (this function is to stay centered, you already have logic for your version) (You may also need Math.max(vx, 0) to stay in view

drawimage(buffercanvas, vx - 400, vy - 400, 800, 800, 0, 0, 800, 800)

I found this sped up my game but I was drawing using lineto() etc, if you are using sprites I am not certain it would offer the same advantage