【JavaScript】 ダミー画像をオフラインで動的に作成する

/*
* ダミーイメージの作成
*/
const dumyImage = ( imageoptions , image = null ) => {

                       // キャンバスの作成
            const cvs = document.createElement("canvas");

                      // キャンバスのサイズをセット
                      // 参考記事：【JavaScript】 Canvasのサイズが難解で困る
            cvs.setAttribute( "width" , imageoptions[0].width );
            cvs.setAttribute( "height" , imageoptions[0].height );

                      // キャンバスのコンテキスト取得
            const context = cvs.getContext('2d');
            context.save();
                      // キャンバスを指定された色で塗りつぶし
            context.fillStyle = imageoptions[0].color;
            context.fillRect(0,0,imageoptions[0].width,imageoptions[0].height);
            context.restore();

                      // その他のオプション処理
            for( let i = 1 ; i < imageoptions.length ; i ++ ){

                context.save();
                const opt = imageoptions[ i ];

                switch (opt.type) {
                    case "text":  // テキスト描画
                        context.fillStyle = opt.color;
                        context.font = opt.font;
                        context.fillText( opt.value , opt.left , opt.top , imageoptions[0].width - opt.left );
                        break;
                    case "line":  // 直線描画
                        context.beginPath();
                        context.lineWidth = opt.width;
                        context.strokeStyle = opt.color;
                        context.moveTo( opt.x1 , opt.y1 );
                        context.lineTo( opt.x2 , opt.y2 );
                        context.stroke( );
                        break;
                }
                context.restore();
            }

            // IMGタグか？
            if( image && image.nodeType === 1 && image.tagName === "IMG" )
                    imageOrCallBack.src = cvs.toDataURL();

            return { 
                        dataUrl: cvs.toDataURL() , 
                        setImage : dumyImage.dumyFunctions.setImage 
            };

};
/*
* コールバック用IMGタグセットメソッド
*/
dumyImage.dumyFunctions ={
            setImage ( image ) {
                image.src = this.dataUrl;
            }
};

const imageoptions = [
            { width:150,height:150,color:"#ccc" },
            { type:"line",x1:0,y1:0,x2:150,y2:150,color:"#0F0",width:1 },
            { type:"line",x1:150,y1:0,x2:0,y2:150,color:"#0F0",width:1 },
            { type:"text",top:50,left:10,color:"#f00",font:"40px sans-serif",value:"No Data" },
            { type:"text",top:100,left:10,color:"#f0f",font:"20px sans-serif",value:"画像がないよ！！" },
        ];

const dmyImageListener = ()=> {
            window.removeEventListener('DOMContentLoaded',dmyImageListener);

            const errorEvt = e => {
                e.onload = () => { e.onerror = e.succuess = null; };
                e.onerror = () => { dmyImg.setImage( e );}
            };

            const dmyImg = dumyImage( imageoptions );

            document.querySelectorAll("#imageArea img").forEach(
                e => {
                    if( e.complete ){
                        if( e.naturalWidth === 0 && e.naturalWidth === 0 ) {
                            const src = e.src;
                            e.src = "";
                            errorEvt(e);
                            e.src = src;
                        }
                    }else{
                        errorEvt(e);
                    }
                }
            );

};
window.addEventListener('DOMContentLoaded',dmyImageListener);