Merge Captured video stream of 2 html5 canvas

Question

I am building a whiteboard app for a web conferencing app. All the libraries that I have investigated uses 2 canvas, 1 on the top for drawing and 1 in the bottom for holding the older drawings(for better performance since the upper canvas gets cleared on every draw).

Now I need to stream the content of these canvases for the other uses so they can see the content live.

Option1:

captureStream from each canvas and merge the videtracks into a single stream, new MediaStream([...bottomTracks, ...topTracks]) , transfer the stream using webrtc and then extract the tracks from the stream, create a new stream for each track new MediaStream([stream.getVideoTracks()[0]]) and play the streams on absolutely positioned video elements. It works but my boss doesn't like it, don't know why? yet!
Is there a downside to this?

Option2:

Create a third off screen canvas and periodically drawImage of the both canvas's on the offscreen canvas and then captureStream from that canvas!

So is there a better way or another way to achieve this?

Update: Why Am I Using 2 canvases?

There only 1 reason, not to redraw everything again if I want to change something that is already drawn, what would change you might ask?
In 2 scenarios for me:

1. Smoothing the line that has been finished drawing by mousedrag,touchmove or pen (to make it feel more like a natural writing, checkout http://fabricjs.com/freedrawing )
2. Draw shapes by mousedrag, touchmove or pen

I know that I can redraw everything on every change but I believe it would have low performance on low end devices.

2 canvases are positioned absolutely on top of each other, The actual user drawings are done on the upper canvas and when its done and any enhancements needed are applied to it, the line/shape gets drawn on the bottom canvas and the upper canvas is cleared.

Answer 1

As noted in the comments by kaiido, you only need one canvas on the screen.

In record.a.video I superimpose 2 video streams (screen video and camera video) onto one canvas. I then use another Media Stream to extract the video from the canvas and share as a VOD or to livestream.

Note that audio must be handled differently, as it is played in the Canvas.