Блог

Я хочу создать дизайн, подобный изображению ниже. Я подумывал о том, чтобы использовать два холста для каждого рисунка и как-то объединить их. В конце концов, мне нужно, чтобы они оба действовали как единый холст, потому что я пытаюсь транслировать холст с помощью WebRTC. Я попытался нарисовать два холста на третьем холсте.

 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  

Проблема, с которой я сталкиваюсь, заключается в том, что каждый граф рисует друг друга на конечном холсте.