javascript/jqueryを使用してhtmlキャンバスに描画すると、このマウスx/yグリッチをどのように修正できますか？

Question

私はこの質問に対する回答を全部探していて、何が間違っているのか分かりません...

これは私の自由な時間にこのようなことを行う最初の試みです私は自分の会社の実際のツールを使って使うことを学ぶことを使うことができます。

参照されているコードはgithubにあります：My Github Repo 残念ながら、私はライブテストではどこにもホストされていません。誰かが私がこの質問に答えるためにどこに置くことができるか分かっているなら、私に知らせてください。

いずれにしても、キャンバスを作成し、javascriptを使用してキャンバスに合わせてマップイメージを描画し、キャンバス内をクリックすると矩形を描画します。しかし何らかの理由で、0,0をクリックしない限り、矩形がカーソル上に正しく描画されない理由を理解できません。右クリックまたは下クリックのいずれかの相加的なオフセットがあります。私は、コンソールのイベントデータを調べ、何が起こっているのかをオンラインで検索しようとしましたが、わかりません。

ご意見がありましたら、感謝します。ありがとうございました！

Answer 1

CSSのキャンバスを拡大縮小しているため、その座標は画面座標と一致しません。

canvas { 
    width: 800px; /* same as the HTML attribute */ 
    height: 600px; /* same as the HTML attribute */ 
} 

にCSSを変更する場合

座標計算がこれを行うことができます。

var posx = e.pageX - position.left, posy = e.pageY - position.top;