javascript の canvas の拡大についてです。

Question

フレームワークはvueを使っているので以下の様になっていますがそこはあまり関係無くcanvasについてのjavascriptでの扱いに関して教えていただきたいです。

        const ctx = canvas.value.getContext('2d')
          canvas.value.width = img.width
          canvas.value.height = img.height
        ctx.drawImage(img, 0, 0)

      <canvas
        id="canvas"
        ref="canvas"
      ></canvas>

これをキャンバスのクリック時などに以下の様に拡大表示できる様にしました。

      const ctx = canvas.value.getContext('2d')
      ctx.scale(1.5, 1.5)
      ctx.drawImage(img, 0, 0)

今回この拡大を中心にから拡大するようにしたいです。

以下の様な画像があった時、

現状以下のように拡大されますが、

以下の様に拡大したいという事です。

これは描画位置を変える必要があるという事でしょうか？その後画像をドラッグして上記二枚目の画像の様な位置に変更したりできる様にしたいためcanvas上のimgの移動方法もご教示いただきたいのですがご存知の方いましたらご回答いただけると大変助かります。

Comments

[yambejp]

svgという選択肢はないですか？

[Hayato1201]

システムの仕様としてcanvasに描画する画像のurlがあります。それを以下の様にimageのsrcに指定してcanvasに描画する様にしています。svgにするとはcanvasを辞めてという事でしょうか?canvasを使用するのも仕様として決まっているので変えられないです。。。
const img = new Image()
img.src = url

Answer 1

var scale = 1.5;
ctx.scale(scale, scale);

var width = img.width;
var height = img.height;
var x = -width * (scale-1) / 2 / scale;
var y = -height * (scale-1) / 2 / scale;
ctx.drawImage(img, x, y);

width * (scale-1)：画像の増加分（もしくは、減少分）
width * (scale-1) / 2：画像の増加分の左半分
width * (scale-1) / 2 / scale：描画時に増加するスケールを考慮した描画開始位置

Comments

[Hayato1201]

ご回答ありがとうございます！
大変助かりました！
もしよろしければ続きで以下のcanvas関連の質問にもご回答いただけますと非常にありがたいです。
https://teratail.com/questions/6nhst57tzfn1el
お手数ですが一度ご確認頂けますと幸いで御座います。