Javascript 获取画布上鼠标在分区内的精确位置

我有两个div标签内的画布。我试着用铅笔在画布上画画，但我不能在鼠标指针的确切位置开始，这里是代码 CSS

JS

HTML

---

你能帮我得到鼠标坐标的精确指针吗？你需要缩放鼠标坐标以匹配画布分辨率

// your code
var mouseX = evt.clientX - left + window.pageXOffset;
var mouseY = evt.clientY - top + window.pageYOffset;

// Add the following 3 lines to scale the mouse coordinates to the
// canvas resolution
const bounds = canvas_test.getBoundingClientRect();
mouseX = (mouseX / bounds.width) * canvas_test.width;
mouseY = (mouseY / bounds.height) * canvas_test.height;

// your code
return {
    x:mouseX,
    y:mouseY
};

---

谢谢@Blindman67它成功了。。！！

var mainCanvas =document.getElementById('canvas_test');
 var previousMousePos,mousePos,paint=false;


  mainCanvas.addEventListener("mousemove",draw,false);
  mainCanvas.addEventListener("mousedown",startdraw,false);
  mainCanvas.addEventListener("mouseup",stopdraw,false);

 function startdraw(event){
  paint=true;
 previousMousePos = getMousePos(event);
 }
function draw(event){
if(paint){
 mousePos = getMousePos(event);
var mainCanvas = document.getElementById('canvas_test');
var ctx = mainCanvas.getContext('2d');
 console.log(" X position :"+ previousMousePos.x);
  console.log(" X position :"+ mousePos.x);
 console.log(" Y position :"+ previousMousePos.y);
 console.log(" Y position :"+ mousePos.y);
 ctx.strokeStyle = "black";
       ctx.lineWidth = 2;
       ctx.beginPath();
       ctx.moveTo(previousMousePos.x, previousMousePos.y);
       ctx.lineTo(mousePos.x, mousePos.y);
       ctx.stroke();
       ctx.closePath();
   previousMousePos = mousePos;
 }
}
function stopdraw(event){
  paint=false;
 previousMousePos = getMousePos(event);
 }

function getMousePos(evt) {
                var obj=document.getElementById("canvas_test");
        var top = 0;
        var left = 0;
        while (obj) {
            top += obj.offsetTop;
            left += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        // return relative mouse position
        var mouseX = evt.clientX - left + this.pageXOffset;
        var mouseY = evt.clientY - top + this.pageYOffset;
        return {
            x:mouseX,
            y:mouseY
        };
    }

<div style="width:800px;height:520px;border:1px solid black;position: relative;" >
 <div class="ot_whiteboard" style="width:500px;height:500px;align:center;">
 <canvas id="canvas_test" class="canvas_test"></canvas>
</div>

// your code
var mouseX = evt.clientX - left + window.pageXOffset;
var mouseY = evt.clientY - top + window.pageYOffset;

// Add the following 3 lines to scale the mouse coordinates to the
// canvas resolution
const bounds = canvas_test.getBoundingClientRect();
mouseX = (mouseX / bounds.width) * canvas_test.width;
mouseY = (mouseY / bounds.height) * canvas_test.height;

// your code
return {
    x:mouseX,
    y:mouseY
};