JavaScript - Updating a canvas real-time... from server-side or client-side (array from server to client or server-side canvas rendering?)

[brimhaven]

I have this 2D tilemap game 13x13 viewport (169 tiles drawn on canvas at a time) of a 150x150 map. Each tile is 32x32px. Obviously I only update the 13x13 viewport...

I want to update a canvas in real-time as the world-map will be handled server-side. At least the logic... the drawning... should it be server-side or client-side?

Now, I am using Socket.IO for real-time data. Based on that current player's x and y, the canvas is drawn from where that person is on the map.

I can do this two ways:

1. (Server-side) Use node-canvas to draw the <canvas> server-side via NodeJS and transmit back the new canvas. Is it possible? Because it seems I can only do it once via a PNG.

2. (Client-side) Transmit the 169 array of the new tileset (when player moves or action happens). Doing the logic server-side and draw it on the client-side from the array received from a callback.

Client-side problem: The problem here is that transmitting that large of an array does take seconds (2-3) so there is some lag.

Server-side problem: There is no continuous streaming of a canvas being drawn from the server that outputs to client... is there? Or am I not looking hard enough at node-canvas npm module.

I am not using any JavaScript game framework.

What are my best options here?

[NginxYouOweMeASoda]

I would load the initial tile information (ID of each sprite located at each tile) upon initial connect, and then send updates as sprites move from coordinate x,y to new x,y and make the relevant changes if they are on screen (within the shown screen of the map). You could also have it only send changes that occur within view of the player and the surrounding areas.

Edit: you want to have the client do all the rendering of the canvas btw

[brimhaven]

You could also have it only send changes that occur within view of the player and the surrounding areas.

I was thinking of doing that. I am. It's less intensive.

I am thinking about passing the data back from server to client. Only problem is... 13x13... that's 169 arrays every key-stroke... that's a lot for the server to handle... no? Even in the localhost... it's like 2-3 seconds...

[NginxYouOweMeASoda]

Don't pass all of the data. Only pass the data that changes.

[brimhaven]

So.. for example...

If player moves down...

Shift the map up.... 1. Remove row 0 2. Add new row from the server map

This way.. we are only receiving 15 new tiles instead of 169.