css transition renders canvas useless

Question

I'm in the process of creating an interactive whiteboard application using PHP and jQuery. Creating a deck is not the issue, nor is applying a canvas overlay to the page so that I can write on it. I'm an amateur coder and completely self-taught. This is part an exercise in learning more, and part a means to give me a great tool to use in my teaching practice.

The problem that I'm encountering is applying a CSS transition to the canvas element, so that as the slides change, the canvas element moves as well, in order to avoid having the previously made drawings still present on new slides.

I have gotten the canvas element to move with the slide transition, however, when this happens, the canvas is rendered useless (on the current slide). If I transition back to the previous slide, I can see everything I've drawn.

I'm hoping that this isn't too vague of a question or explanation of the situation to get help, but any pointers would be great.

Answer 1

Figured out the problem. I thought the original script was taking into account the distance the slides were transitioning, but it wasn't. I added in a line to take care of this, and it works like a charm.