I want to create a design like the image below. I was thinking about using two canvas for each drawing and merging them somehow. In the end, I need both of them to act like a single canvas because I am trying to stream the canvas using webRTC. I have tried drawing two canvas into a third canvas.

const ctx = canvas1.getContext("2d"); //600/500 pixels
const ctx2 = canvas2.getContext("2d"); //600/100 pixels
const contex = canvas.getContext("2d"); //final canvas 600/600 pixels

contex.drawImage(canvas1, 0, 0); //canvas 1 in image
//contex.clearRect(0, 500, 600, 100);
contex.drawImage(canvas2, 0, 500); //canvas 2 is the counter

The problem I have is that each count is drawing over each other in the final canvas.