Interactive video with simulation using Canvas

JavaScript
#1

I have created a few simple simulations using the canvas tag, and now I would like to embed similar types of simulations on a mp4 file so that I can create an e-learning interactive video. Does anyone know how this can be done? Some websites are great (like H5P) but don’t allow interactive simulations.

I’d like some advice: should I try and place a video in the canvas tag? Or should I try and overlay the simulation on top of a video? Does anyone know any code I can use to get started?

Thanks so much, and sorry if this is a simple question - I’m pretty new to HTML/JS

Here’s an example of a simulation I’ve made:

https://virtuallypassedsmartsparrow.github.io/1DoF-Vibration-Q1/Draganddrop.html

#2

if I understood properly and you want to convert canvas to video you can have a look at this

#3