Currently, I am working on a project to develop an interactive whiteboard application using PHP and jQuery. Generating a deck and implementing a canvas overlay for drawing purposes are tasks that I have managed to accomplish without any issues. As a self-taught amateur coder, this project serves as both a learning experience and a valuable tool for my teaching practice.
However, the main challenge I am facing is applying a CSS transition to the canvas element so that it moves along with the slide transitions. This is crucial in order to prevent previous drawings from being visible on new slides.
Although I have successfully made the canvas element move with the slide transitions, it unfortunately renders the canvas useless on the current slide. When going back to the previous slide, all the drawn elements reappear.
I understand if this explanation may seem vague, but I would greatly appreciate any guidance or advice on how to resolve this issue.