ES6の記法
・function ()　－＞　() =>

1.1 // ファンクションをグルーピング
brfore:

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

                this.setBgColor(this.bgColor);
                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);
        };

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

        this.drawStart = function (x, y, cnvBold, cnvColor ) {
                this.ctx.lineWidth = cnvBold;
                this.ctx.strokeStyle = 'rgba('+cnvColor+')';
                // 初回処理
                this.ctx.beginPath();
                this.ctx.lineCap = "round";  //　線を角丸にする
                this.ctx.moveTo(x, y);
        };

        // 描画処理
        this.draw = function (x, y, cnvBold, cnvColor ) {
                this.ctx.lineWidth = cnvBold;
                this.ctx.strokeStyle = 'rgba('+cnvColor+')';
                // 初回以降処理
                this.ctx.lineTo(x, y);
                this.ctx.stroke();
        };

        // canvasの背景色を設定(指定がない場合にjpeg保存すると背景が黒になる)
        this.setBgColor = function( bgColor){
                this.ctx.fillStyle = bgColor;
                this.ctx.fillRect(0, 0, this.cnvWidth, this.cnvHeight);
        };

        this.setCnvColor = function (cnvColor) {
                this.cnvColor = cnvColor;
        };

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

after:

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

                this.setBgColor(this.bgColor);

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

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

        this.drawStart = (x, y, cnvBold, cnvColor ) => {
                this.ctx.lineWidth = cnvBold;
                this.ctx.strokeStyle = 'rgba('+cnvColor+')';
                // 初回処理
                this.ctx.beginPath();
                this.ctx.lineCap = "round";  //　線を角丸にする
                this.ctx.moveTo(x, y);
        };

        // 描画処理
        this.draw = (x, y, cnvBold, cnvColor )  => {
                this.ctx.lineWidth = cnvBold;
                this.ctx.strokeStyle = 'rgba('+cnvColor+')';
                // 初回以降処理
                this.ctx.lineTo(x, y);
                this.ctx.stroke();
        };

        // canvasの背景色を設定(指定がない場合にjpeg保存すると背景が黒になる)
        this.setBgColor = ( bgColor) => {
                this.ctx.fillStyle = bgColor;
                this.ctx.fillRect(0, 0, this.cnvWidth, this.cnvHeight);
        };

        this.setCnvColor = (cnvColor) => {
                this.cnvColor = cnvColor;
        };

        this.setCnvBold = (cnvBold) => {
                this.cnvBold = cnvBold;
        };