HTML5 캔버스(Canvas)에 SVG 파일을 그리는 방법

HTML5에서는 캔버스(canvas) 요소 위에 이미지를 자유롭게 렌더링할 수 있습니다. 특히 SVG 파일처럼 벡터 기반의 이미지도 drawImage() 메서드를 사용하면 손쉽게 캔버스에 그릴 수 있습니다.

기본 원리

캔버스에 이미지를 그리려면 먼저 Image 객체를 생성하고, src 속성에 SVG 파일 경로를 지정합니다. 그다음 이미지 로딩이 완료되는 시점(onload 이벤트)에 drawImage() 메서드를 호출하면 됩니다.

예제 코드

var myImg = new Image();
myImg.onload = function() {
    ctx.drawImage(myImg, 0, 0);
}
myImg.src = "https://www.example.com/files/sample.svg";

코드 설명

• Image 객체 생성: new Image()로 새로운 이미지 객체를 만듭니다.
• onload 이벤트: 이미지가 완전히 로드된 후에만 그리기 작업이 실행되도록 보장합니다.
• drawImage(myImg, 0, 0): 캔버스의 좌표 (0, 0) 위치, 즉 왼쪽 상단 모서리에 이미지를 배치합니다.

주의 사항

위 코드가 정상적으로 동작하려면 캔버스의 2D 렌더링 컨텍스트를 미리 가져와야 합니다. 일반적으로 다음과 같이 작성합니다.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

또한 외부 도메인의 SVG 파일을 불러올 경우 CORS(교차 출처 리소스 공유) 정책에 따라 요청이 차단될 수 있으므로, 같은 도메인 내의 파일을 사용하거나 서버 측에서 적절한 CORS 헤더를 설정해 주는 것이 좋습니다.