無名関数から通常の関数へ

1.1 // 色の変更
無名関数から通常の関数へ
brfore:

       // 色の変更
                for (let j = 0; j < c_elms.length; j++) {
                        if(c_elms[j].tagName != 'A') {
                                continue;
                        }
                        c_elms[j].onclick = function() {
                                let cnvColor = this.getAttribute( "data-color" ) ;
                                console.log("cnvColor ="+cnvColor );

                                root.setCnvColor(cnvColor);
                        }
                }

after:

       // 色の変更
        for (let i = 0; i < cElements.length; i++) {
                c_elms = cElements[i].childNodes;

                for (let j = 0; j < c_elms.length; j++) {
                        if(c_elms[j].tagName != 'A') {
                                continue;
                        }
                        c_elms[j].addEventListener("click" , _data_color, false);

                }
        }

        function _data_color() {
                let cnvColor = this.getAttribute( "data-color" ) ;
                console.log("cnvColor ="+cnvColor );

                root.setCnvColor(cnvColor);
        }

1.2 // 線の太さ変更
無名関数から通常の関数へ
brfore:

       // 線の太さ変更
        for (let i = 0; i < bElements.length; i++) {
                b_elms = bElements[i].childNodes;

                for (let j = 0; j < b_elms.length; j++) {
                        if(b_elms[j].tagName != 'A') {
                                continue;
                        }
                        b_elms[j].onclick = function() {
                                let cnvBold = this.getAttribute( "data-bold" ) ;
                                console.log("cnvBold ="+cnvBold );

                                root.setCnvBold(cnvBold);
                        }
                }
        }

after:

       // 線の太さ変更
        for (let i = 0; i < bElements.length; i++) {
                b_elms = bElements[i].childNodes;

                for (let j = 0; j < b_elms.length; j++) {
                        if(b_elms[j].tagName != 'A') {
                                continue;
                        }
                        b_elms[j].addEventListener("click" , _data_bold, false);
                }
        }

        function _data_bold() {
                let cnvBold = this.getAttribute( "data-bold" ) ;
                console.log("cnvBold ="+cnvBold );

                root.setCnvBold(cnvBold);
        }

1.3 // 描画クリア
無名関数から通常の関数へ
brfore:

       // 描画クリア
        clear.onclick = function(){
                root.ctx.clearRect(0, 0, root.cnvWidth, root.cnvHeight);
                root.setBgColor(root.bgColor);
        }

after:

       // 描画クリア
        clear.addEventListener("click" , _clear, false);

        function _clear(){
                root.ctx.clearRect(0, 0, root.cnvWidth, root.cnvHeight);
                root.setBgColor(root.bgColor);
        }

1.4 // canvasを画像で保存
無名関数から通常の関数へ
brfore:

       // canvasを画像で保存
        download.onclick = function(){
                var base64 = root.canvas.toDataURL("image/jpeg");
                document.getElementById("download").href = base64;
        }

after:

       // canvasを画像で保存
        download.addEventListener("click" , _download, false);

        function _download(){
                var base64 = root.canvas.toDataURL("image/jpeg");
                document.getElementById("download").href = base64;
        }