@murashi2 (浩二中村)posted at 2022-06-09

canvas使用時のマウスクリックによる座標位置のズレについての質問

Q&A

Closed

HTMLのcanvasタグで図形を用いた簡単なアプリを作成中です。
jsでイベントリスナーによるマウスのクリックで円を作成して行くのですが、
ボタンタグをcanvasの範囲の上側に配置したところ
マウスクリックした際に円の中心で作成が出来ず、実際にcanvasに作成される位置がズレてしまいます
解決方法をどなたかご教示いただけないでしょうか。

該当するソースコード

task

  <button id="new">作成</button>
  <button id="select">選択</button>
  </br>

<canvas id="can1" width="600" height="400" style="border:black solid 1px">
</canvas>

<script>
  let canvas = document.getElementById("can1");
  let ctx =canvas.getContext('2d');

  canvas.addEventListener('click', function(ev){
    let x = ev.x;
    let y = ev.y;
    let start = (Math.PI/180)*0;
    let end = (Math.PI/180)*360;

    ctx.lineWidth = 2;
    ctx.strokeStyle = 'red';
    ctx.fillStyle = 'pink';
    
    ctx.beginPath();
    ctx.arc(x,y,30,start,end)
    ctx.stroke();
    ctx.fill();
  });

</script>

自分で試したこと

canvasの初期位置とクリックする際の座標の位置を整えるタグを探しましたが、見つけることができませんでした。

1Answer

@YottyPG posted at 2022-06-10

canvas自体の開始座標が考慮されておらず、描画位置がずれているのだと思います。

こちらのサイトを参考に書き換えたところ、うまく中心で描画できました。

-    let x = ev.x;
-    let y = ev.y;

+    const rect = ev.target.getBoundingClientRect();
+    let x = ev.x - rect.left;
+    let y = ev.y - rect.top;

See the Pen Untitled by yotty (@yotty) on CodePen.

0Like

Comments

@murashi2
Questioner
なるほど！　大変助かりました。
有難うございます！

Are you sure you want to delete the question?