캔버스 페이드 인/아웃 기능이 예상대로 작동하지 않습니다.

Question

그래서 예상대로 작동하지 않는 캔버스를 페이드 아웃하기 위해 이러한 기능을 사용하고 있습니다. 다음은 현재 내가 작업하고있는 내용입니다.

function fade_out() 
{ 
    var canvas = document.getElementById("builder"); 
    var context = canvas.getContext('2d'); 

    console.log(context.globalAlpha); 

    context.globalAlpha -= 0.01; 

    if(context.globalAlpha > 0) 
    { 
     setTimeout(fade_out, 5); 
    } 
} 
function fade_in() 
{ 
    var canvas = document.getElementById("builder"); 
    var context = canvas.getContext('2d'); 

    context.globalAlpha += 0.01; 

    if(context.globalAlpha < 1) 
    { 
     setTimeout(fade_in, 5); 
    } 
} 

내 의도는 0.5 초 페이드로 만드는 것이 었습니다. 내가 결국에 깜박이는 것은 깜박 거리는 순간이었습니다. 첫 번째 함수의 console.log는 내가 기대했던 방식대로 작동하지 않는다고 알려줍니다. 여기서 무엇이 잘못 되었습니까?

편집 : 무한 루프가 진행되는 것처럼 보입니다. context.globalAlpha는 숫자를 사용하지 않아도 20 자리 숫자로 나옵니다.

Answer 1

function fade_in() { 
setTimeout(function() { 
    var cn = document.getElementById("builder"); 
    var ct = cn.getContext('2d').globalAlpha; 
    ct += 0.02; 
    if(ct >= 1) { 
     ct=1; 
    } 
    if (ct < 1) { 
    fade_in(); 
    } 
    else { 
    return false; 
    } 
}, 30); 
} 
function fade_out() { 
setTimeout(function() { 
    var cn = document.getElementById("builder"); 
    var ct = cn.getContext('2d').globalAlpha; 
    ct -= 0.02; 
    if(ct <= 0) { 
     ct=0; 
    } 
    if (ct > 0) { 
    fade_out(); 
    } 
    else { 
    return false; 
    } 
}, 30); 
}