한 HTML5 Canvas의 콘텐츠를 다른 Canvas에 로컬로 복사하는 방법은 무엇입니까?

drawImage() 메서드는 캔버스에 이미지, 캔버스 및 비디오를 그리는 데 사용됩니다. 또한 이미지의 일부를 그리거나 이미지 크기를 늘리거나 줄일 수 있습니다.

예시

예를 들어 보겠습니다 -

//context grabbed from your destination canvas
ctx = destinationCanvas.getContext('2d');

//drawImage() called passing the source canvas directly
dCtx.drawImage(sourceCanvas, 0, 0);

이 코드에서는 먼저 소스 캔버스에서 이미지를 복사합니다. sourceCanvas는 HTMLImageElement, HTMLVideoElement 또는 HTMLCanvasElement일 수 있습니다. 캔버스 그리기 컨텍스트는 소스로 사용할 수 없습니다. 캔버스 그리기 컨텍스트가 소스 캔버스인 경우 context.canvas

후자의 코드는 drawImage() 메서드를 사용하여 소스 캔버스에서 원하는 캔버스로 컨텍스트를 복사합니다.