实际上，复制画布数据的正确方法是将旧画布传递给新的空白画布。试试这个功能。

function cloneCanvas(oldCanvas) {

    //create a new canvas
    var newCanvas = document.createElement('canvas');
    var context = newCanvas.getContext('2d');

    //set dimensions
    newCanvas.width = oldCanvas.width;
    newCanvas.height = oldCanvas.height;

    //apply the old canvas to the new one
    context.drawImage(oldCanvas, 0, 0);

    //return the new canvas
    return newCanvas;
}

使用 getImageData 用于像素数据访问，而不是用于复制画布。在浏览器上使用它进行复制非常缓慢且困难。应该避免。

你可以打电话

context.getImageData(0, 0, context.canvas.width, context.canvas.height);

这将返回一个 ImageData 对象。它有一个名为数据的属性，类型为 CanvasPixelArray，其中包含所有像素的 rgb 和透明度值。这些值不是对画布的引用，因此可以在不影响画布的情况下进行更改。

如果您还需要该元素的副本，您可以创建一个新的 canvas 元素，然后将所有属性复制到新的 canvas 元素中。之后，您可以使用

context.putImageData(imageData, 0, 0);

方法将 ImageData 对象绘制到新的画布元素上。

请参阅此答案以获取更多详细信息getPixel from HTML Canvas？关于操作像素。

您可能会发现这篇 mozilla 文章也很有用https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes