16->17 JavaScript 変更 完成

1. // main.js
brfore:

                       root.setBgColor(root.bgColor);

after:


2. // canvas.js
2.1 プロパティにアクセスするファンクションを追加
brfore:

function rootCreate () {

after:

function rootCreate () {
        // context
        this.ctx = null;
        this.canvas = null;
        this.cnvWidth = 500;
        this.cnvHeight = 500;
    // 変数宣言

        this.bgColor = "transparent";

        this.getCanvas = () => {
                return this.canvas;
        }
        this.setCanvas = (canvas) => {
                this.canvas = canvas;
        }

        this.getCtx = () => {
                return this.ctx;
        }
        this.setCtx = (ctx) => {
                this.ctx = ctx;
        }

        this.getCnvWidth = () => {
                return this.cnvWidth;
        }

        this.getCnvHeight = () => {
                return this.cnvHeight;
        }

        this.getCnvColor = () => {
                return this.cnvColor;
        };


        this.getCnvBold = () => {
                return this.cnvBold;
        };

        this.getBgColor = () => {
                return this.bgColor;
        };


2.2 マウス押下開始
brfore:

                // マウス押下開始
                        this.drawStart(e.offsetX, e.offsetY, this.cnvBold, this.cnvColor);

after:

                // マウス押下開始
                        this.drawStart(e.offsetX, e.offsetY, this.getCnvBold(), this.getCnvColor());

2.3 マウス押下終了
brfore:

                // マウス押下終了
                        this.canvas.removeEventListener("mousemove" , this.mouseMove, false);

after:

                // マウス押下終了
                        let canvas = this.getCanvas();
                        canvas.removeEventListener("mousemove" , this.mouseMove, false);

2.4 // canvas上でのイベント
brfore:

                // canvas上でのイベント
                this.draw(e.offsetX, e.offsetY, this.cnvBold, this.cnvColor);

after:

                // canvas上でのイベント
                this.draw(e.offsetX, e.offsetY, this.getCnvBold(), this.getCnvColor());

2.5 canvasの背景色を設定(指定がない場合にjpeg保存すると背景が黒になる)
brfore:

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

                let ctx = this.getCtx();

                ctx.fillStyle = bgColor;
                ctx.fillRect(0, 0, this.getCnvWidth(), this.getCnvHeight());

after:

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

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