JSFiddle - React, Tailwind, and code Playground
JavaScript
const detachedCanvasEl1 = document.createElement('canvas');
const detachedCanvasEl2 = document.createElement('canvas');
const imageEl = document.createElement('img');
const copyImageToCanvasEl2 = () => {
detachedCanvasEl2.width = detachedCanvasEl1.width;
detachedCanvasEl2.height = detachedCanvasEl1.height;
detachedCanvasEl2.getContext('2d').drawImage(detachedCanvasEl1, 0, 0);
setTimeout(() => document.body.appendChild(detachedCanvasEl2), 2000);
};
const copyImageToCanvasEl1 = () => {
detachedCanvasEl1.width = imageEl.width;
detachedCanvasEl1.height = imageEl.height;
detachedCanvasEl1.getContext('2d').drawImage(imageEl, 0, 0);
copyImageToCanvasEl2();
};
imageEl.onload = copyImageToCanvasEl1;
imageEl.src = 'https://jsfiddle.net/img/logo.png';