将一个HTML画布绘制到另一个

Question

好的，所以我有重叠的画布，一个基础画布，可能还有多个重叠的画布。基础画布是固定的，但是重叠的画布可以调整大小并拖动。

我希望能够在用户拖动的确切位置上将重叠画布的内容绘制到基础画布上

这是我尝试过的：

function drawToCanvas() {
            var baseRect = base_canvas.getBoundingClientRect();
            var overlayCanvases = [...document.querySelectorAll('.overlay-canvas')].forEach(overlay => {
                var topRect = overlay.getBoundingClientRect();
                if (isCanvasOverlapping(baseRect, topRect)) { //returns true if an overlay canvas overlaps the base canvas                     
                    base_context.drawImage(overlay, 0, 0, overlay.scrollWidth, overlay.scrollHeight, topRect.x, topRect.y, overlay.scrollWidth, overlay.scrollHeight);
                }
           });
        }

将覆盖的画布绘制到基础画布上，但是未在正确的位置绘制。有时它偏向一侧或另一侧。 如何将每个叠加层绘制到画布上，使其与基础画布上方的相对位置正确？