html5 canvas.offsetTop and offsetLeft is not offset by canvas position but relitive to window

Question

Im trying to get the users mouse X & Y relative to the actual canvas. For some reason canvas.offsetTop and canvas.offsetLeft is not registering the position of the canvas.

The registration of capture is at window top left -> (0, 0) no matter what. It only captures the clientY and clientX when the parts of the canvas are in the size of the canvas relative to (0, 0).

The below html is nested in other divs that have a shared left position of around 200. I have already tried giving the canvas a position:absolute and tried floating it left as suggested in another question.

Everything works as expected if I dont nest the canvas in any divs.

<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>

The function that uses clientX and 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;
        }
    }
}

**Edit for clarification. Im only interested in pure javaScript answers. **

Answer 1

Try this. I added some code to draw a dot where you click, so you can tell it's getting the correct location in relation to the canvas.

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;
        }
    }
}