contextr | pfp image can only accept valid file extensions

First of, "timeupdate" event is fired multiple times - so you are actually calling draw much more times than you want. This is the reason why it starts lagging - many operations are executed per second. You may probably listen to "play" and "pause" events (fired after play() and pause() methods being executed; "play" event is also called when the video begins, so you don't have to call it manually, it will be fired anyway). Then you can manually handle your drawing loop. That should solve your problem(I was able to reproduce and it fixes the slow down effect).

Also, here are some tips you may consider:

1. Do NOT use setTimeout() for animations, especially when playing with canvas. Read about window.requestAnimationFrame(), which is far better, and consider using it instead.
2. You may consider many optimizations in that code, for example generating canvas elements in your code(to get rid of ids), using Object.assign() to add multiple properties to an object in the same line, introduce loops. Volume of that code will decrease drastically. It is not a must, but it is always good to maintain code quality. Simply - less work in the future.

Regards and Have a nice day!

Edit: Don't get me wrong, some of this is only about personal preferences. After working quite a lot with js, I like to keep it simple, like in this snippet. Enjoy free code!