1. rootオジェクトの定義

root = {
        // context
        "ctx":null,

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

        // 描画処理
        "draw":function (x, y, cnvBold, cnvColor ) {
                this.ctx.lineWidth = cnvBold;
                this.ctx.strokeStyle = 'rgba('+cnvColor+')';
                // 初回処理の判定
                if (globalThis.clickFlg == "1") {
                        globalThis.clickFlg = "2";
                        this.ctx.beginPath();
                        this.ctx.lineCap = "round";  //　線を角丸にする
                        this.ctx.moveTo(x, y);
                } else {
                        this.ctx.lineTo(x, y);
                }
                this.ctx.stroke();
        },

        // canvasの背景色を設定(指定がない場合にjpeg保存すると背景が黒になる)
        "setBgColor":function( bgColor){
                const cnvWidth = 500;
                const cnvHeight = 500;

                this.ctx.fillStyle = bgColor;
                this.ctx.fillRect(0,0,cnvWidth,cnvHeight);
        }
};

1.1 JSONオブジェクによる定義

　root:{
　　　　"ctx":null,
　　　　"init":function () {　...　}
       "draw":function (x, y, cnvBold, cnvColor ) { ...　}
       "setBgColor":function( bgColor){  ...　}
  };

　JSONオブジェクトはオブジェクトリテラルの記法を基にしている
・オブジェクトリテラルの中には、数値リテラル、文字リテラル、オブジェクトリテラル、配列リテラル、関数リテラル、正規表現リテラルが持てる
・JSONオブジェクトは　JSON文字列とJSON値から成る
・JSON値の中には、JSONオブジェクト、JSON配列、JSON文字列、JSON数値、のほかtrue,false,nullが持てる

1.2 globalThis.clickFlg
関数内なので、グルーバル変数であることを明示的にする

1.3 this.ctx
this.ctx は　root.ctxと同一

1.4 this.ctx.lineWidth, this.ctx.strokeStyle
　this.ctx.lineWidth = cnvBold;
　this.ctx.strokeStyle = ‘rgba(‘+cnvColor+’)’;
JavaScriptでは、オブジェクトにプロパティが定義されていなくても、代入可能
・新たなプロパティが代入時に生成される

2.初期化プログラムinit()
2.1 初期化プログラムinit()のfunction定義

function init () {
    // canvas

    globalThis.clickFlg = 0;  // クリック中の判定 1:クリック開始 2:クリック中
    // 変数宣言
    var cnvColor = "255, 0, 0, 1";  // 線の色
    var cnvBold = 5;  // 線の太さ
    var bgColor = "rgb(255,255,255)";

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



    // canvas上でのイベント
    $("#canvas").mousedown(function(){
      globalThis.clickFlg = 1; // マウス押下開始
    }).mouseup(function(){
      globalThis.clickFlg = 0; // マウス押下終了
    }).mousemove(function(e){
      // マウス移動処理
      if(!globalThis.clickFlg) return false;
      root.draw(e.offsetX, e.offsetY, cnvBold, cnvColor);
    });


/*
    // 色の変更
    $(".color a").click(function(){
      cnvColor = $(this).data("color");
      return false;
    });
*/

        let cElements = document.getElementsByClassName('color');
        var c_elms;
        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].onclick = function() {
                                cnvColor = this.getAttribute( "data-color" ) ;
                                console.log("cnvColor ="+cnvColor );
                        }
                }
        }


/*
    // 線の太さ変更
    $(".bold a").click(function(){
      cnvBold = $(this).data("bold");
      return false;
    });
*/

        let bElements = document.getElementsByClassName('bold');
        var b_elms;
        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() {
                                cnvBold = this.getAttribute( "data-bold" ) ;
                                console.log("cnvBold ="+cnvBold );
                        }
                }
        }


    // 描画クリア
    $("#clear").click(function(){
      root.ctx.clearRect(0,0);
      root.setBgColor(bgColor);
    });

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

2.1 globalThis.clickFlg
init関数内なので、グルーバル変数であることを明示的にする

2.2 jQueryからの置き換え
bdfore:

    // 線の太さ変更
    $(".bold a").click(function(){
      cnvBold = $(this).data("bold");
      return false;
    });

after:

        let bElements = document.getElementsByClassName('bold');
        var b_elms;
        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() {
                                cnvBold = this.getAttribute( "data-bold" ) ;
                                console.log("cnvBold ="+cnvBold );
                        }
                }
        }

3.ソースをすべて読み込んでからinitを実行させる

window.onload = init;