JavaScript로 URL 이미지를 불러와 HTML5 Canvas에 그리는 방법

URL에서 이미지를 로드하여 HTML5 Canvas에 그리기

웹 페이지의 외부 이미지를 canvas에 표시하려면 먼저 JavaScript에서 Image 객체를 생성하고 src 속성에 이미지 URL을 설정해야 합니다.

단, 주의할 점이 있습니다. 이미지는 비동기적으로 로드되기 때문에 load 이벤트가 발생할 때까지 기다린 후에 그려야 합니다. 이미지 로드가 완료되기 전에 drawImage()를 호출하면 아무것도 화면에 나타나지 않습니다.

다음은 전체 구현 예제입니다:

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

var myImg = new Image();
myImg.onload = function() {
    context.drawImage(myImg, 0, 0);
};
myImg.src = 'https://www.tutorialspoint.com/images/seaborn-4.jpg?v=2';

코드 설명

• getElementById()로 canvas 요소를 가져온 뒤, getContext("2d")를 호출하여 2D 렌더링 컨텍스트를 얻습니다.
• new Image()로 새로운 이미지 객체를 생성합니다.
• onload 이벤트 핸들러 안에서 drawImage(myImg, 0, 0)을 호출하여 이미지를 좌표 (0, 0) 위치에 그립니다.
• 마지막으로 src에 이미지 URL을 할당하면 브라우저가 이미지를 다운로드하기 시작하고, 로드가 완료되는 순간 onload 콜백 함수가 실행됩니다.

이처럼 onload 이벤트를 활용하면 이미지가 완전히 준비된 상태에서 canvas에 안전하게 그릴 수 있습니다.