그리기 전 이미지 로드 대기

캔버스에 이미지를 추가하려고 할 때 먼저 이미지가 로드되었는지 확인하는 것이 중요합니다. 그것을 그려보려고 합니다. 코드에서 발생한 문제는 이미지 로딩의 비동기 특성으로 인해 발생합니다.

이 문제를 해결하려면 이미지의 onload 이벤트에 콜백 함수를 추가해야 합니다. 이 콜백 함수는 이미지 로드가 완료되면 실행되어 이미지를 그리기 전에 이미지 데이터를 사용할 수 있는지 확인합니다.

아래 수정된 코드는 이미지를 캔버스에 그리기 전에 이미지가 로드될 때까지 기다립니다. :

var canvas = document.getElementById('viewport'),
    context = canvas.getContext('2d');

make_base();

function make_base() {
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function() {
    context.drawImage(base_image, 100, 100);
  };
}