0

I am developing an application that needs to render the real time canvas activity (canvas1.html) in another page(canvas2.html).

For ex: canvas1.html (Contains the actual canvas layer) if I click the background colour button in this page then the background colour change activity should also happen in canvas2.html and in canvas1.html as well.

Stacks using -

Front end : HTML, CSS and Js

Server side : Nodejs

Can someone help me with this workflow? I am stuck with how I can achieve this pipeline.

I have attached screenshots for you reference.enter image description here

enter image description here

Your suggestions would be really appreciated and Thank you!

Suren
  • 1
  • 1
  • Please provide enough code so others can better understand or reproduce the problem. – Community Oct 26 '21 at 09:47
  • what is the relationship between canvas1.html and canvas2.html? Are they displayed at the same time (in two ` – tromgy Oct 26 '21 at 10:27
  • @tromgy Yes the activity will be displayed at the same time, canvas1.html is the admin view and canvas2.html is the client view. So basically the admin will control the tools like changing the background color, ball color, sounds, etc.. So if the admin click the background-color change button then the bg-color change activity should happen in canvas2.html I have tried with socket.IO and few npm packages for canvas liveview but couldn't establish a connection between them. – Suren Oct 27 '21 at 09:42
  • Why do you need two separate pages? Can't you just use two canvases on the same page? That will make it much simpler -- all communcation can be done in the client code. But if you really need them, then, I think yes, socket.io could solve it -- changes in the admin view need to be sent to the server, which will then re-broadcast them to client view(s) – tromgy Oct 27 '21 at 10:34
  • @tromgy Yes, I got your point and it's possible to have the two canvases on the same page and that will work. But my workflow is different so I had to create two separate canvases. I have already tried it with socket io but it doesn't emit the canvas activity in another page. Do you know any references/samples for making this kind of workflow? Link to my canvas1.html code - https://github.com/ravinthiranpartheepan1407/stackoverflow/blob/main/canvas1.html – Suren Oct 27 '21 at 12:55
  • you can follow a simple example here: https://socket.io/get-started/chat, just instead of chat messages you should send your own custom messages containing drawing commands. – tromgy Oct 27 '21 at 13:01
  • @tromgy Thank you for your suggestion! I will try this procedure. – Suren Oct 28 '21 at 08:00

0 Answers0