JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <canvas id="canvas1" width="200" height="200" style="border: 1px solid red;" ></canvas>
    <canvas id="canvas2" width="200" height="200" style="border: 1px solid black;" ></canvas>
</div>

JavaScript

var canvas1 = document.getElementById('canvas1');
var ctx = canvas1.getContext('2d');
 
ctx.beginPath();
ctx.rect(30, 30, 60, 30);
ctx.fillStyle = '#ff0000';
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = 'black';
ctx.stroke();

var dataString = canvas1.toDataURL('image/png');
console.log(dataString);

var img = new Image();
img.src = dataString;

 // var canvas2 = document.getElementById('canvas2');
 // var ctx2 = canvas2.getContext('2d');
 // ctx2.drawImage(img, 0, 0);

img.onload = function() {
    var canvas2 = document.getElementById('canvas2');
    var ctx2 = canvas2.getContext('2d');

    ctx2.drawImage(img, 0, 0);
};