1. canvas.js
1.1 グローバルな変数宣言、ファンクションの宣言ををrootオブジェクトの中に移動

before:

    // 変数宣言
        var cnvColor = "255, 0, 0, 1";  // 線の色
        var cnvBold = 5;  // 線の太さ
        var bgColor = "transparent";

    // canvasの背景色を設定(指定がない場合にjpeg保存すると背景が黒になる)
       root.setBgColor(bgColor);

    // canvas上でのイベント
        function _mouseMove(e){
                root.draw(e.offsetX, e.offsetY, cnvBold, cnvColor);
        }
        root.canvas.onmousedown = function(e){
                // マウス押下開始
                root.drawStart(e.offsetX, e.offsetY, cnvBold, cnvColor);
                root.canvas.addEventListener("mousemove" , _mouseMove, false);
        }
        root.canvas.onmouseup = function(){
                // マウス押下終了
                root.canvas.removeEventListener("mousemove" , _mouseMove, false);
        }

after:

root = {

    // 変数宣言
        "cnvColor" : "255, 0, 0, 1",  // 線の色
        "cnvBold" : 5,  // 線の太さ
        "bgColor" : "transparent",


        // ccanvasの初期化
        "init":function () {
                this.canvas = document.getElementById('canvas');
                this.ctx = this.canvas.getContext('2d');

                this.setBgColor(this.bgColor);
　　　　　　　　　this.canvas.onmousedown	=	function(e){
　　　　　　　　　　//	マウス押下開始
　　　　　　　　　　　root.drawStart(e.offsetX,	e.offsetY,	root.cnvBold,	root.cnvColor);
　　　　　　　　　　　root.canvas.addEventListener("mousemove"	,root.mouseMove,	false);
　　　　　　　　　}
　　　　　　　　　this.canvas.onmouseup	=	function(){
　　　　　　　　　　//	マウス押下終了
　　　　　　　　　　　root.canvas.removeEventListener("mousemove"	,	root.mouseMove,	false);
　　　　　　　　　}
         },
        root.canvas.onmousedown = function(e){
                // マウス押下開始
                root.drawStart(e.offsetX, e.offsetY, cnvBold, cnvColor);
                root.canvas.addEventListener("mousemove" , _mouseMove, false);
        }
        root.canvas.onmouseup = function(){
                // マウス押下終了
                root.canvas.removeEventListener("mousemove" , _mouseMove, false);
        }

1.2 cnvColor をグローバルな変数宣言からrootオブジェクトの中に移動したのに合わせて、プロパティを操作するファンクションを定義しそのファンクションを用いて、プロパティを操作する

before:

    // 変数宣言
        var cnvColor = "255, 0, 0, 1";  // 線の色

                        c_elms[j].onclick = function() {
                                cnvColor = this.getAttribute( "data-color" ) ;
                                console.log("cnvColor ="+cnvColor );
                        }

after:

root = {
        "cnvColor" : "255, 0, 0, 1",  // 線の色

　　　　・・・

        "setCnvColor": function (cnvColor) {
                this.cnvColor = cnvColor;
        },

1.3 cnvBold をグローバルな変数宣言からrootオブジェクトの中に移動したのに合わせて、プロパティを操作するファンクションを定義しそのファンクションを用いて、プロパティを操作する

before:

    // 変数宣言
        var cnvBold = 5;  // 線の太さ

                        b_elms[j].onclick = function() {
                                cnvBold = this.getAttribute( "data-bold" ) ;
                                console.log("cnvBold ="+cnvBold );
                        }

after:

                        c_elms[j].onclick = function() {
                                let cnvColor = this.getAttribute( "data-color" ) ;
                                console.log("cnvColor ="+cnvColor );

                                root.setCnvColor(cnvColor);
                        }

　　　　・・・

root = {
        "cnvBold" : 5,  // 線の太さ

　　　　・・・

        "setCnvBold": function (cnvBold) {
                this.cnvBold = cnvBold;
        }

1.4 cnvBold をグローバルな変数宣言からrootオブジェクトの中に移動したのに合わせて、プロパティを操作するファンクションを定義しそのファンクションを用いて、プロパティを操作する

before:

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

after:

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

　　　　・・・

root = {

　　　　・・・

        "cnvWidth" : 500,
        "cnvHeight" : 500,