座標

マウスを動かしてください。

        
            <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;
              });
            </script>