JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c1"></canvas>
<canvas id="c2"></canvas>
<canvas id="c3"></canvas>

<canvas id="buffer"></canvas>

<div id="output">Empty</div>

CSS

canvas[id^=c], div[id=output] {
    border: 1px solid red;
}

canvas[id=buffer] {
    border: 1px dotted green;
}

#output {
    padding: 15px;
}

#output img {
    border: 1px dotted blue;
}

JavaScript

$(document).ready(function() {
    var b_canvas1 = document.getElementById("c1");
    var b_context1 = b_canvas1.getContext("2d");
    b_context1.fillRect(100, 200, 100, 50);
    var b_canvas2 = document.getElementById("c2");
    var b_context2 = b_canvas2.getContext("2d");
    b_context2.fillRect(80, 50, 50, 50);
    var b_canvas3 = document.getElementById("c3");
    var b_context3 = b_canvas3.getContext("2d");
    b_context3.fillRect(150, 50, 50, 50);
    
    var img1 = new Image();
    img1.src = b_canvas1.toDataURL("image/png");
    var img2 = new Image();
    img2.src = b_canvas2.toDataURL("image/png");
    var img3 = new Image();
    img3.src = b_canvas3.toDataURL("image/png");
    
    var buffer = document.getElementById("buffer");
    var buffer_context = buffer.getContext("2d");
    buffer_context.drawImage(img1, 0, 0);
    buffer_context.drawImage(img2, 0, 0);
    buffer_context.drawImage(img3, 0, 0);
    
    var buffer_img = new Image();
    buffer_img.src = buffer.toDataURL("image/png");
    
    $('#output').html('<img src="' + buffer_img.src + '" alt="Canvas Image" />');
});