Quiero crear un diseño como la imagen de abajo. Estaba pensando en usar dos lienzos para cada dibujo y fusionarlos de alguna manera. Al final, necesito que ambos actúen como un solo lienzo porque estoy tratando de transmitir el lienzo usando webRTC. He intentado dibujar dos lienzos en un tercer lienzo.

 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

El problema que tengo es que cada conteo se dibuja sobre otro en el lienzo final.