I am building a website that lets users draw in real-time together. When a user joins, they send a request to the server for any existing draw data, which is then received and rendered on a canvas. This is done using websockets (with socket.io), and the code is very simple.

Server:

socket.emit('draw_data', data);

Client:

socket.on('draw_data', (data) => {
  for (var i of data) {
    drawPoint(i);
  }
});

This process works as expected 70% of the time. The other 30%, nothing will show up on the canvas unless I resize the window. I've tried some hacky fixes like rendering twice, but that doesn't do anything. Does anyone know why this is happening and how to fix it?