Using socket.io library, I created an interactive flower garden patch. The page is listening for mouse clicks and draws flowers based on where the clicks happened.
The images are actually supposed to be gifs but I realized canvas does not support gif playback and the gif has to be updated frame by frame. I tried to use the requestAnimationFrame() function to update the canvas but got stuck in how to use that in conjunction with socket.io and eventListeners. I also originally intended to get different flowers assigned to different users like having nicknames but with flowerID but am not sure how to get this to work in the backend with setting up users. I will try to improve this further after further look into it.
