Javascript 将用户选择从一个画布复制到另一个画布

我正在尝试实现一个简单的，在画布上选择区域，然后将区域复制到画布B，我已经让选择部分工作，但复制区域的绘图不想工作。其想法是，用户将选择一个区域，然后在完成选择后，该选择将显示在另一个画布上，即说mousedown，拖动矩形区域，mouseup（复制显示）

我承认我不是一个很好的前端开发人员，所以我担心我错过了一些关于这些东西是如何工作的明显的东西，因为我只是想把一些东西拼凑起来，以证明一个概念，并理解目前的基础知识

JSFIDLE在这里-

HTML

欢迎指点

---

下面的指南可能会有所帮助

它提到您可以使用

drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

其中s是源，d是目的地

从那里你只需要确定点击和拖动的位置，计算出坐标和宽度/高度

我更新了你的小提琴只是为了演示一下。它非常粗糙，所以只需单击图像左上角的某个位置，然后再次单击右下角的某个位置

---

这里的问题是在

getImageData

之后执行

onload

处理程序。因此，当您调用

getImageData

时，原始画布实际上是空白的。但是，更正此错误将导致一个跨源安全错误，这是一个完全独立的问题。非常感谢，我将看看是否可以将其应用到现有代码中。干杯

var original = document.getElementById("original");
var CTXoriginal = original.getContext("2d");
var copybit = document.getElementById("copybit");
var CTXcopybit = copybit.getContext("2d");


var background = new Image();
background.src = "https://i.imgur.com/F1pJYM1.jpg";

background.onload = function(){
    CTXoriginal.drawImage(background, 0, 0)
}

var imageData = CTXoriginal.getImageData(10, 10, 100, 100);
CTXcopybit.putImageData(imageData,0,0);

drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)