moduleの導入
1. index.html
1.1 moduleの導入の為、htlmからのjavaScriptの呼び出し名を変える
before:

<script type="module" src="js/canvas.js"></script>

after:

<script type="module" src="js/main.js"></script>

1.2 jsのディレクトリ配置
js —- main.js
    |
    - modules — canvas.js

$ pwd
/var/www/html/JS/11/js
$ ls
main.js  modules
$ cd modules/
$ ls
canvas.js
$

1.3 main.js

import { rootCreate} from  './modules/canvas.js';

var root =  new rootCreate();

window.root = root;

window.onload = init;

function init () {
    // canvas


        root.init();

    // 色の変更
        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() {
                                let cnvColor = this.getAttribute( "data-color" ) ;
                                console.log("cnvColor ="+cnvColor );

                                root.setCnvColor(cnvColor);
                        }
                }
        }


    // 線の太さ変更
        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() {
                                let cnvBold = this.getAttribute( "data-bold" ) ;
                                console.log("cnvBold ="+cnvBold );

                                root.setCnvBold(cnvBold);
                        }
                }
        }


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

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

1.4 canvas.js

function rootCreate () {
        // context
        this.ctx = null;
        this.canvas = null;
        this.cnvWidth = 500;
        this.cnvHeight = 500;
    // 変数宣言
        this.cnvColor = "255, 0, 0, 1";  // 線の色
        this.cnvBold = 5;  // 線の太さ
        this.bgColor = "transparent";

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

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

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

        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;
        };

        return this;
};

export { rootCreate };