座標

let p1=document.getElementById("p1"); document.addEventListener("mousemove",function(event){
let cx=event.clientX;
let cy=event.clientY;
let ox=event.offsetX;
let oy=event.offsetY;
p1.innerHTML="このマウスの座標はclient X="+cx+",Y="+cy+" offset X="+ox+",Y="+oy;
});

let p2=document.getElementById("p2");
document.addEventListener("click",function(event){
p2.innerHTML="clickはx="+event.clientX+",y="+event.clientY+"で行われました。";
});

    
    <h1>座標</h1>
    <p>マウスを動かしてください。</p>
    <div id="position">a</div>
    <canvas id="can"></canvas>
    <P id="p1"></P>
    <p id="p2"></p>
    <script>
    //各変数を使用可能にします。
      let offsetX = can.getBoundingClientRect().left;
      let offsetY = can.getBoundingClientRect().top;
      let pp=document.getElementById('position');
          pp.innerText="canvasの左上の座標はoffsetX ="+offsetX+",offsetY="+offsetY;
      let p1=document.getElementById("p1");
      let p2=document.getElementById("p2");
      document.addEventListener("mousemove",function(event){
      let cx=event.clientX;
      let cy=event.clientY;
      let ox=event.offsetX;
      let oy=event.offsetY;

        p1.innerHTML="マウスの位置はclient X="+cx+",Y="+cy+"  offset X="+ox+",Y="+oy;
      });
      let p2=document.getElementById("p2");
      document.addEventListener("click",function(event){
        p2.innerHTML="clickはx="+event.clientX+",y="+event.clientY+"で行われました。";
      });
    </script>