html5 canvas.offsetTopとoffsetLeftはキャンバスの位置によってオフセットされず、ウィンドウに相対的です。

Question

実際のキャンバスに対してユーザーのマウスX & Yを取得しようとしています。何らかの理由でcanvas.offsetTopとcanvas.offsetLeftがキャンバスの位置を登録していません。

キャプチャの登録は左のウィンドウ上部にある - >（0、0）に関係なく、どのような。キャンバスの一部が（0、0）を基準にキャンバスのサイズにある場合にのみ、クライアントYとクライアントXをキャプチャします。

以下のHTMLが、私はすでにキャンバスに位置を与えて試してみました周りの200の共有左の位置を持っている他のdiv内にネストされています絶対と別の質問で提案されているように、それは左に浮いてみました。

すべてのdivでキャンバスをネストしないと、すべてが正常に機能します。明確化のためにclientXとY

function getMouse(event){ 
    // get clients mouse movement for logic 
    var cX = event.clientX + sco.canvas.offsetLeft; 
    var cY = event.clientY + sco.canvas.offsetTop; 
    // get the status div for returning client mouse movement and the ID of boxes 
    var status = document.getElementById('status'); 
    // loop through board square array 
    for(var i = 0; i < board.square.length; i++){ 
     // set square object to small variable 
     var s = board.square[i]; 
     // logic for each box boundary 
     if(cX > s.X && cX < s.X + s.W && cY > s.Y && cY <= s.Y + s.H){ 
      // set status div so user can see the board is interactive and not static 
      status.innerHTML = 'clientX = '+cX+' | clientY = '+cY+' | id:'+s.id; 
     } 
    } 
} 

** [編集]を使用しています

<div id="checkHoldBoarder" style="position:absolute; top:580px; left:0px;"> 
    <div id="checkerHoldStuff" style="width:800px; height:900px;"> 

     <div id="chkBoardBoarder" style="position;absolute; top:10px; left:0px;"> 
      <div id="chkBoardStuff" style="width:600px; height:402px;"> 
       <canvas id='board' width='600px' height='400px' style='position:relitive; left:0px; top:0px;'></canvas> 
       <div id='status'></div> 
      </div> 
     </div> 

    </div> 
</div> 

機能。私は純粋なJavaScriptの答えに興味があります。 **

Answer 1

これを試してください。私はあなたがクリックドットを描画するためにいくつかのコードを追加したので、あなたはそれをキャンバスに関連して正確な位置を取得しています伝えることができます。

https://jsfiddle.net/jhggd8uz/

$(document).ready(function() { 
    document.getElementById('board').addEventListener("mousedown", getMouse, false); 
}); 

function getMouse(event){ 
    console.log("Clicked canvas"); 

    var canvas = document.getElementById('board'); 
    var parentOffset = $(this).offset(); 

    var relX = event.pageX - parentOffset.left; 
    var relY = event.pageY - parentOffset.top; 

    console.log("relX: ", relX); 

    var b_context = canvas.getContext("2d"); 

    b_context.beginPath(); 
    b_context.arc(relX, relY, 5 , 0, 2 * Math.PI, true); 
    b_context.fillStyle = "blue"; 

    b_context.fill(); 

    return; 

    // get clients mouse movement for logic 
    var cX = event.clientX + sco.canvas.offsetLeft; 
    var cY = event.clientY + sco.canvas.offsetTop; 
    // get the status div for returning client mouse movement and the ID of boxes 
    var status = document.getElementById('status'); 
    // loop through board square array 
    for(var i = 0; i < board.square.length; i++){ 
     // set square object to small variable 
     var s = board.square[i]; 
     // logic for each box boundary 
     if(cX > s.X && cX < s.X + s.W && cY > s.Y && cY <= s.Y + s.H){ 
      // set status div so user can see the board is interactive and not static 
      status.innerHTML = 'clientX = '+cX+' | clientY = '+cY+' | id:'+s.id; 
     } 
    } 
}