我想复制一个画布的所有内容，并将它们转移到客户端的另一个。我会认为我会使用canvas.toDataURL()和context.drawImage()方法来实现这个，但我遇到了几个问题。
我的解决方案是获取Canvas.toDataURL()并将其存储在Javascript中的Image对象中，然后使用context.drawImage()方法将其放回。
但是，我相信toDataURL方法返回一个64位编码标签与“data：image / png; base64，”前面。这似乎不是一个有效的标签，(我可以总是使用一些RegEx删除这个)，但是64位编码字符串之后的“数据：image / png; base64，”子字符串有效的图像？我可以说image.src = iVBORw … ASASDAS，并将其画在画布上吗？
我看了一些相关的问题：
Display canvas image from one canvas to another canvas using base64
但是解决方案似乎不正确。
解决方法
实际上，你不必创建一个图像。 drawImage()将接受一个Canvas以及一个Image对象。
//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');
//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas,0);
方法比使用ImageData对象或Image元素更快。
注意，sourceCanvas可以是HTMLImageElement,HTMLVideoElement或HTMLCanvasElement.正如Dave在这个答案下面的注释中提到的，你不能使用画布图上下文作为你的源代码。如果你有一个画布上下文而不是从它创建的canvas元素，那么在context.canvas上的上下文中有一个对原始canvas元素的引用。
这里是一个jsPerf来演示为什么这是唯一正确的方式克隆画布：http://jsperf.com/copying-a-canvas-element