Fabric JS 캔버스 비동기 처리

if( 조건문 ) {

    new Promise -> then -> then ( 
    	const canvas = new fabric.Canvas('canvas', {
    	backgroundImage : // image source
		}
    
    ) -> then

}

function() // 실행 할 함수

Canvas 생성을 배경이미지로 할 때, 이미지 로딩이 비동기로 진행되기 때문에 캔버스 로딩도 비동기로 진행된다.

 

그래서 조건문 다음의 함수를 실행할 때, 해당 함수가 캔버스 객체를 이용할려고 하면 캔버스가 undefined 되어있다.

조건문 내에서는 Promise 구문을 이용해서 비동기 처리를 했지만, 조건문 외부함수와는 동기화 되지 않았다.

 

그래서, 외부 함수도 비동기 처리 해주면 해결된다.

 

if( 조건문 ) {

    new Promise -> then -> then ( 
    	const canvas = new fabric.Canvas('canvas', {
    	backgroundImage : // image source
		}
    
    ) -> then(()=> {
    	function() // 실행 할 함수
    })

}