HTML5 Canvas 콘텐츠를 다른 Canvas로 로컬 복사하는 방법

HTML5에서 하나의 Canvas에 그려진 내용을 다른 Canvas로 복사해야 하는 경우가 종종 있습니다. 이때 가장 간단하고 효율적인 방법은 drawImage() 메서드를 활용하는 것입니다.

drawImage() 메서드란?

drawImage() 메서드는 원래 이미지, 비디오, 그리고 다른 캔버스(canvas) 요소를 현재 캔버스 위에 그리기 위해 사용됩니다. 이 메서드는 이미지의 일부분만 잘라서 그릴 수도 있고, 이미지 크기를 확대하거나 축소하여 그릴 수도 있어 매우 유연하게 활용할 수 있습니다.

Canvas 복사 예제

다음은 소스 캔버스의 내용을 대상 캔버스로 복사하는 기본 예제입니다.

// 대상(destination) 캔버스에서 컨텍스트를 가져옵니다
ctx = destinationCanvas.getContext('2d');

// 소스 캔버스를 직접 전달하여 drawImage()를 호출합니다
dCtx.drawImage(sourceCanvas, 0, 0);

코드 동작 방식 설명

위 코드는 먼저 소스 캔버스(source canvas)에서 이미지를 가져와 대상 캔버스에 그리는 방식으로 동작합니다. 여기서 sourceCanvas 자리에는 HTMLImageElement, HTMLVideoElement, 또는 HTMLCanvasElement가 올 수 있습니다.

주의할 점은 캔버스 드로잉 컨텍스트(drawing context) 자체는 소스로 사용할 수 없다는 것입니다. 만약 소스로 캔버스 컨텍스트를 사용하려는 상황이라면, 해당 컨텍스트에는 원본 캔버스 요소에 대한 참조가 context.canvas 속성으로 포함되어 있으므로 이를 활용하면 됩니다.

결국 후반부 코드에서는 drawImage() 메서드를 호출하여 소스 캔버스의 컨텍스트 내용을 원하는 대상 캔버스로 그대로 복사하는 것입니다. 이 방법은 픽셀 단위 데이터를 일일이 처리하지 않아도 되므로 성능 면에서도 효율적이며, 실시간 렌더링이나 오프스크린 캔버스 작업 시 널리 사용되는 표준적인 기법입니다.