11->12 JavaScript 変更

rootからthisに変更
1. canvas.js
1.1 マウス押下開始とマウス押下終了をrootからthisに変更
function(){…}.bind(this); でfunction内のthisを式の評価時のthisに固定する

before:

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

after:

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

1.2 canvas上でのイベントをrootからthisに変更
function(){…}.bind(this); でfunction内のthisを式の評価時のthisに固定する

before:


    // canvas上でのイベント
        this.mouseMove = function (e){
                let root = window.root;
                //console.log(this);
                root.draw(e.offsetX, e.offsetY, root.cnvBold, root.cnvColor);
        };

after:


    // canvas上でのイベント
        this.mouseMove = function (e){
                //console.log(this);
                this.draw(e.offsetX, e.offsetY, this.cnvBold, this.cnvColor);
        }.bind(this);