JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<p>
TEST
</p>

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

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

CSS

canvas { background: #eee;}

JavaScript

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

function getMouse(event){
	console.log("Clicked canvas");
  
var canvas = document.getElementById('board');//$('#board').get(0);
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;
        }
    }
}