jQuery: canvasによる画像サイズ変更

以下のようにコードを書いていますが、画像がうまく反映されません。
エラーは発生していません。
画像をcanvasを使って表示したいのですが、一部分しか表示されません。
例えば、600 x 600の画像を読み込んだ場合、
表示が300 x 150になって頭の部分しか見れません。

drawImageが効いていないように見受けられます。
こちらはなぜでしょうか。
ご回答していただければ幸いです。

jQuery
1const ctx = resizePic[0].getContext("2d");
2
3  $("#pic").on("change", function (event) {
4    const file = event.target.files[0];
5    if (!file) return;
6    const reader = new FileReader();
7
8    reader.onload = (event) => {
9      const image = new Image();
10      image.src = event.target.result;
11
12      image.onload = function () {
13        $("#resize-pic").width(this.width).height(this.height);
14
15        let w = Number(this.width);
16        let h = Number(this.height);
17
18        ctx.drawImage(image, 0, 0, w, h);
19      };
20    };
21
22    reader.readAsDataURL(file);

HTML
1<div class="wrapper">
2        <div class="get-image">
3          <p>画像読み込み</p>
4          <input type="file" id="pic" />
5        </div>
6        <div class="image-resize" id="image-resize">
7          <p>リサイズ画像</p>
8          <canvas class="canvas" id="resize-pic"></canvas>
9        </div>
10      </div>

m.ts10806

2022/07/22 08:19

>画像がうまく反映されません。何が起きているのでしょう >drawImageが効いていないように見受けられます。エラーが発生していないかブラウザ開発ツールのコンソールで確認しましたか？ https://teratail.com/help/question-tips#questionTips34

CatBot

2022/07/22 08:23

エラーは発生していません。画像をcanvasを使って表示したいのですが、一部分しか表示されません。

m.ts10806

2022/07/22 08:23 編集

質問は編集できるので、確認した状況が赤の他人に伝わるように修正願います。 >一部分しか表示されません。どういう画像（サイズなど）がどう表示されているか提示されないことには答えようがないとも思います。

回答1件

ベストアンサー

表示が300 x 150になって頭の部分しか見れません。

canvasのデフォルトサイズです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas

this が画像そのものではなくcanvasを示しているのだと思います（デバッグで値確認を）

対策としては下記いずれか

画像を指定サイズにリサイズして表示する（canvasにもそのサイズを反映）
画像のリアルサイズを取得してcanvasに反映（でも大きすぎると画面はみ出して全体レイアウトに影響する。スクロール出す？）
canvasのサイズをかなり大きくする（非推奨）

その画像をその後どう利用するかによって決めてください。（仕様になるので）

投稿2022/07/22 08:30

編集2022/07/22 08:32

m.ts10806

総合スコア80695

回答へのコメント

CatBot

2022/07/22 08:48

こちらの回答をヒントに以下のように編集しました。原因はcanvasサイズを指定していなかったためです。 $("#resize-pic").width(this.width).height(this.height); → $("#resize-pic").attr("width", this.width);