JavaScript 「Uncaught (in promise) TypeError」の対処方法を教えて頂けないでしょうか。

Question

実現したいこと

デバッグあるいはエラーの原因の特定方法を教えて頂けないでしょうか。
https://upload0605.web.fc2.com/sample_nov292024/idx.html

発生している問題・分からないこと

オセロゲームでの画像が一部表示されない。

エラーメッセージ

 Uncaught (in promise) TypeError: CanvasRenderingContext2D.drawImage: Argument 1 could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, OffscreenCanvas, ImageBitmap, VideoFrame.
    draw https://upload0605.web.fc2.com/sample_nov292024/js/resource-img.js:47
    drawToken https://upload0605.web.fc2.com/sample_nov292024/js/app-view.js:107
    scanBoard https://upload0605.web.fc2.com/sample_nov292024/js/reversi-low.js:24
    drawToken https://upload0605.web.fc2.com/sample_nov292024/js/app-view.js:88
    <anonymous> https://upload0605.web.fc2.com/sample_nov292024/js/main.js:11
resource-img.js:47:6

該当のソースコード

// main.js

'use strict';

document.addEventListener(
  'DOMContentLoaded',
  async () => {
    reversiCore.init();
    await appResource.load();
    appView.init();
    appView.drawToken();
    appView.drawCanPut();
  }
);

// resource-img.js

'use strict';

/*
 * variable      :
 * 1. resourceImg: { Object } リソース 画像の名前空間
 * 2. holder     : { Object } img要素オブジェクトを格納するオブジェクト
 */
const resourceImg = { holder: {} };

/*
 * description: 画像ファイルを読み込む関数
 * id         : { String  } id名
 * url        : { String  } 画像のurl
 * returns    : { Promise } プロミスオブジェクト
 */
resourceImg.load = function({ id, url }) {
  return new Promise(
    resolve => {

      // img: { Object } img要素を表すオブジェクト
      const img = new Image();


      img.onload        = resolve; // 読み込み後の処理
      img.src           = url;     // URLを指定
      this.holder[ id ] = img;
    }
  );
}; // resourceImg.load = function({ id, url }) {}


/*
 * description: 画像を描画する関数
 * id         : { String } id名
 * cobj       : { Object } キャンバスのオブジェクト
 * x          : { Number } 画像の水平位置
 * y          : { Number } 画像の鉛直位置
 * w          : { Number } 画像の横幅
 * h          : { Number } 画像の高さ
 * returns    : no return values
 */
resourceImg.draw = function({ id, cobj, x, y, w, h }) {
  cobj
    .ctx
    .drawImage(this.holder[ id ], x, y, w, h); // エラーが発生する箇所 @@@@@@@@@@@@@@@@
};

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

（検証１）

document.addEventListener(
  'DOMContentLoaded',
  async () => {
    try {
      reversiCore.init();
      await appResource.load();
      appView.init();
      appView.drawToken();
      appView.drawCanPut();
    } catch (err) {
      console.log(`エラー発生: ${ err.message }`);
    }
  }
);

21:54:09.916 エラー発生: CanvasRenderingContext2D.drawImage:
Argument 1 could not be converted to any of: HTMLImageElement,
SVGImageElement, HTMLCanvasElement, HTMLVideoElement,
OffscreenCanvas, ImageBitmap, VideoFrame. main.js:25:15

（検証２）

appResource.load = async function() {

  // promises: { Array } プロミスインスタンスを格納する配列
  const promises = [];


  promises.push( resourceImg.load({ id: 'token0', url: 'img/token_0.png' }) );
  promises.push( resourceImg.load({ id: 'token1', url: 'img/token_1.png' }) );
  promises.push( resourceImg.load({ id: 'square', url: 'img/square.png'  }) );
  promises.push( resourceImg.load({ id: 'active', url: 'img/active.png'  }) );
  await Promise
          .all(promises)
          .then(  res => console.log(res) )
          .catch( err => console.log(`エラー: ${ err }`) );
};

エラーは検出されず。

補足

特になし

Answer 1

エラーメッセージに従い、まずは怪しそうな内容を具体的に確認することをオススメします。

ざっくり解説

エラーメッセージは要約すると「canvas 2D の drawImage 関数の第1引数が、描画可能なモノではない」という感じの TypeError だと主張しています。
問題のdrawImage関数はスタックトレースの一番上にあるとおり resource-img.js ファイルの 47 行目で呼び出しています。
draw https://upload0605.web.fc2.com/sample_nov292024/js/resource-img.js:47

その第1引数 this.holder[ id ] が、本当に描画可能なモノ（HTMLImageElement等の想定した画像データetc）かどうかを確認してみればよいでしょう。

具体的な確認方法

確認方法としては、ブラウザの開発者ツールのブレークポイントなどを使ってデバッグ実行して止めてみても良いですし

お手軽に問題箇所であるdrawImage関数呼び出しの直前（当該ファイル 45 行目とか）に
console.log(id, this.holder[ id ]);
のようなデバッグ出力を仕込んでみても良いでしょう。

Comments

[taka_oct092018]

pecmm様

返信が遅れてしまい申し訳ありません。

アドバイス通り繰り返しデバッグを行った所、複数の問題箇所を突き止めて修正できました。
ありがとうございます。