Canvas cannot capture the current position of the mouse

the following picture shows that when the mouse draws a circle from the upper left corner, the mouse position is not captured correctly, and the more the mouse goes to the right or down, it will move a great distance, as shown in figures 1 to 4 below.

ask the great god for advice. I really don"t know what to do. Both client and page have been used, and so has offset. Even if you can"t capture the coordinates, the greater the distance, the farther the position of the painting

the code is as follows

html partial code

<div align="center" class="father">
        <canvas id="mycanvas" class="canvas" width="650px" height="414px"></canvas>
        <img src="dzgw/swform/images/1.png" class="canvas_bgp">
        <div class="textarea-box-wrapper">
            <div id="textarea-wrap" style="display: none;position: absolute;z-index: 10;">
                <textarea rows="5" cols="15" wrap="hard" style="display: block;"></textarea>
                <input type="button" id="savetext" class="save-text" value="">
                <input type="button" id="canceltext" class="save-text" value="">
            </div>
        </div> 
    </div>

js partial code

var canvas = document.getElementById("mycanvas");
var cvs = canvas.getContext("2d");

canvas.onmousedown = function(e){
            /**/ 
            
            var start_x = e.pageX - canvas.offsetLeft + document.body.scrollLeft;  
            var start_y = e.pageY - canvas.offsetTop + document.body.scrollTop;
            console.log("XY:"+e.clientX+","+ e.clientY);
            console.log("canvasXYmoveTo:"+start_x+","+ start_y);
            console.log("canvas:"+canvas.offsetLeft+","+ canvas.offsetTop);
            console.log(":"+document.body.scrollLeft+","+ document.body.scrollTop);
            
            cvs.beginPath();    //  
            cvs.moveTo(start_x, start_y);   //  

            /**/  
            cvs.lineCap = "round";  
            cvs.lineJoin ="round";  
            cvs.strokeStyle = penColor;     //  
            cvs.lineWidth = penWeight;      //  

            addClick(start_x,start_y);

            canvas.onmousemove = function(e){
                /**/  
                var move_x = e.pageX - canvas.offsetLeft + document.getElementById("bod").scrollLeft;  
                var move_y = e.pageY - canvas.offsetTop + document.getElementById("bod").scrollTop;  
                console.log("------------------");
                console.log("XY:"+e.clientX+","+ e.clientY);
                console.log("XY:"+e.pageX+","+ e.pageY);
                console.log("canvasXYlineTo:"+move_x+","+ move_y);
                console.log("canvas:"+canvas.offsetLeft+","+ canvas.offsetTop);
                console.log(":"+document.body.scrollLeft+","+ document.body.scrollTop);

                
                cvs.lineTo(move_x, move_y);     //  
                cvs.stroke();   // 
                //console.log(move_x,move_y)

                // ""
                preClickX.splice(0,preClickX.length);
                preClickY.splice(0,preClickY.length);
                preSize.splice(0,preSize.length);
                preColor.splice(0,preColor.length);
                preWidth.splice(0,preWidth.length);

                $("-sharpnextstep").attr("disabled","disabled");

                addClick(move_x,move_y,cvs.strokeStyle,cvs.lineWidth);
            }  


            canvas.onmouseup = function(e){ 
                indexPP;
                cvs.closePath();    //  

                $("-sharpprestep").attr("disabled",false); // ""
                canvas.onmousemove = null;
                canvas.onmouseup = null;  


            }  
            canvas.onmouseleave = function(){
                cvs.closePath();
                canvas.onmousemove = null;  
                canvas.onmouseup = null; 
            }
        }
    }