Javascript Draw on canvas and merge it with video and save it together

Question

I have an app which allow to draw on canvas with free hand paint. And there is video playing behind the paint. Is there any way to save the video with the paint data as video file?

Thanks

Answer 1

As far as I know, there is no standard api to export canvas data to a video file. However, there are a few libraries that do this. This question explains some possible ways of doing this.

In order to combine the video and the user input, you'll have to use an offscreen canvas:

var canvas = document.createElement("canvas");
canvas.width = inputCanvasElement.width;
canvas.height = inputCanvasElement.height;
var context = canvas.getContext("2d");

context.drawImage(videoElement,0,0);
context.drawImage(inputCanvasElement,0,0);

This will render the video and the contents of the canvas on a single canvas that can then be saved to a video using some library.

However, note that since all of this is done in the browser (combining the canvas and video contents as well as encoding the video), this will probably be too slow to do in real time on a high framerate.