[SOLVED] Is there a way to save the state of a canvas on reload?

Is there a way to save the state of a canvas on reload?

I'm using node js, to build a virtual whiteboard, where 2 or more clients can write on the board, using socket.IO module.

For the board, I used p5.js. Is there a way to save the state of the canvas (board). Whenever a client reloads the page, the contents of the board is cleared. I don't want this to happen. And idea on how this can be done?

Solution

If you think it's not a problem to store this data in the browser, you could try using Window.localStorage. See https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Otherwise, you'll have to store that in your server. Well, you'll have to store in your database occasionally, anyway, if you're supposed to save the data in the long term.

Also, keep in mind that the Window.localStorage only works on a "per browser" approach. I mean, data won't be shared between different devices, for example. Thus, maybe it's a good idea to consider using both.