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