(JavaScript) 캔버스에 이미지가 안그려지던 문제

공유되는 캔버스 그림을 구현하던 도중,

새로 들어온 유저가 현재 그려지고 있는 그림을 가져와야 하는 상황이 생겼다.

 

그림을 가져오려면,

1. 현재 그려지고 있던 그림 정보를 저장하고,

2. 그림 정보를 서버로 보낸 후,

3. 새로 들어온 유저에게 그림 정보를 넘겨준다.

4. 해당 유저는 입장고 동시에 받은 그림 정보를 자신의 캔버스에 써서 그림을 복사(?) 해준다.

 

이렇게 진행을 하고 있었다.

3번까지는 문제없이 진행되었지만,

아니 심지어 4번에서 유저가 그림 정보까지 가지고 있다는 것을 확인을 했는데..

 

image 객체를 만들고, 이미지 정보(src)를 셋팅하고, 그리기를 실행하면 -> 그려지지가 않는다,,!(왜!도덕책!왜!)

 

그래서.. setInterval 로 시간을 좀 준 뒤에 하니까 되더라..

 

잉? 그럼 뭔가 이미지가 완전히 생성되는데 시간이 필요한건가?

 

해서 찾아보니..

 

 

image.src를 셋팅하면 이게 로드되는데까지 시간이 살짝 걸릴 수 있다고..

 

그래서 당장 찾아버린 해결책!

function temp(data){
 
   const imageTemplete = new Image(); // 가져온 그림을 담을 이미지
 
   imageTemplete.src = data;
 
   imageTemplete.onload = function(){
 
      ctx.drawImage(imageTemplete, 0, 0);
   }
}

보이는가!! 킹갓 onload!

image 객체가 로드 되었을 때 실행할 함수다..

 

고로 이 안에다가 draw를 넣어주면 해결!