DRAWIMAGEで描いた「表示」其の画像を徐々に画面領域から消えるようにFADEOUT機能を【CANVASに】

       <canvas width="980" height="446">
            
       </canvas>

//addEventlistener および attachEvent かを 判断(関数addListener)＝＝作成
function addListener(element, event, listener) {
    //addEventlistener(InternetExplorer以外)の処理
    if (element.addEventListener) {
        element.addEventListener(event, listener, false);
        //attachEvent(InternetExplorer および其の)処理
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, listener);
    } else {
        //どちらも 扱えない 場合の 処理
        throw new Error('イベントリスナに未対応です。');
    }
};

//addListener(window, 'load', init);
//読み込み 完了時の 初期動作addListener 関数
addListener(window, 'load', move);
//init()関数 
function init() {
    //
    var element = document.getElementById("move");
    //calendar の 範囲 style.backgroundColor="red" 赤色表記(確認用)  
    return element.style.backgroundColor = #000000;

};
//自動スクロール および 遷移（矢印）を 関数 move で実行
function move() {
    var Timer00 = null;
    var w = 0;
    var Timer = null;
    var countup = 0;
    var canvasobj = document.getElementsByTagName("canvas")[0];
    var context = canvasobj.getContext("2d");
    var myImage = new Image();
    myImage.src = "../javaimg/124.png"; 
    while (w <= 3) {
        myImage.onload = function () { 
            context.drawImage(this, 0, 0, 920, 440);
            
            Timer = setInterval(img, 1000);
                countup++;
                
                if (countup == 1) {
                    myImage.src = "../javaimg/124.png";
                    myImage.onload = function () {

                        var count = 1.0;
                        context.drawImage(this, 0, 0, 920, 440);
                        Timer00 = setTimeout(alpha, 100);
                        //Timer00 = setTimeout(function () { alpha(count); }, 100);
                        //Timer00 = null;

                        function alpha() {   
                            myImage.src = "../javaimg/124.png";
                            
                            myImage.onload = function () {  
                                if (count > 0.0) {


                                    context.globalAlpha = count;
                                    context.save();
                                    //context.globalCompositeOperation = "lighter";

                                    count = count - 0.2;
                                    context.drawImage(this, 0, 0, 920, 440);
                                } else {
                                    //Timer00 = clearInterval(Timer00);]

                                    Timer00 = null;
                                }
                            }
                        }
                    }
                }
                if (countup == 3) {
                    
                    myImage.src = "../javaimg/logo.png";

                    myImage.onload = function () {
                        
                        context.drawImage(this, 0, 0, 920, 440);
                    }
                    
                } else if (countup == 6) {
                    
                    myImage.src = "../javaimg/56.png";
                    
                    myImage.onload = function () {
                        
                        context.drawImage(this, 0, 0, 920, 440);
                    }
                    
                } else if (countup == 9) {
                    
                    myImage.src = "../javaimg/25.png";
                    
                    myImage.onload = function () {
                        
                        context.drawImage(this, 0, 0, 920, 440);
                    }
                    
                } else if (countup == 12) {
                    
                    
                    countup = 0;
                }
               
            }

        }
                   
        w++;
    }
};

drawImage()で表示させた画像をsetTimeoutなどで呼び出す毎に描けば（canvasに）FADEOUTが出来るかと、、
全体が不明瞭ではありますがもしよろしければ解説をご検討をお願い申し上げます。。。。。。。。