작성
·
631
1
답변 1
2
말씀대로 이미지를 생성하고 로드를 시도하는 시점에 차이가 있어서 그런건데요,
두가지 경우 각각 일어나는 일들의 순서를 간단히 정리해보면 아래와 같습니다^^
#1
1. setCanvas 호출로 이미지 생성, 로드 시도
2. setCanvas에서 생성한 이미지들이 모두 로드 완료되고 나면 load 이벤트 발생 -> load 이벤트핸들러 실행
3. 이미지 로드가 모두 완료된 상태에서 drawImage를 실행하는 것이므로 캔버스에 이미지가 제대로 그려짐
#2
1. 따로 먼저 실행하는 함수 없이 그냥 페이지 로드 -> html안에 <img> 태그로 넣은 이미지들만 로드 시도
2. html에 작성되어있는 요소들의 로드가 완료되고 나면 load 이벤트 발생 -> load 이벤트핸들러 실행
3. load 이벤트핸들러가 실행되면 그제서야 setCanvas 호출로 이미지들을 생성하고 로드 시도
4. setCanvas 실행 하자마자 기다림 없이 drawImage를 실행하므로, 이 시점에는 setCanvas에서 만든 이미지들의 로드가 완료되지 않았으므로 정상적으로 그려지지 않음