在HTML画布上的错误位置绘制-Javascript

我的Javascript绘图有问题，在绘图事件中，我的光标位于右侧约300像素，下方约100像素

我已经研究了其他几个类似的问题，尝试了不同的方法，比如

clientX/Y

，但没有一个有效。任何帮助都将不胜感激。这是我的密码：

我的画布元素：

<canvas id="can" width="1000" height="1000"></canvas>

我的初始化函数：

function init() {

    canvas = document.getElementById('can');

    ctx = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;

    canvas.addEventListener("mousemove", function (e) {
        findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function (e) {
        findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function (e) {
        findxy('out', e)
    }, false);

}

计算绘制位置：

function findxy(res, e) {

    if (res == 'down') {
        prevX = currX;
        prevY = currY;
        currX = e.pageX - canvas.offsetLeft;
        currY = e.pageY - canvas.offsetTop;
        console.log(e.pageX + " " + e.pageY);
        flag = true;
        dot_flag = true;
        if (dot_flag) {
            ctx.beginPath();
            ctx.fillStyle = x;
            ctx.fillRect(currX, currY, 2, 2);
            ctx.closePath();
            dot_flag = false;
        }
    }
    if (res == 'up' || res == "out") {
        flag = false;
    }
    if (res == 'move') {
        if (flag) {
            prevX = currX;
            prevY = currY;
            currX = e.pageX - canvas.offsetLeft;
            currY = e.pageY - canvas.offsetTop;
            draw();
        }
    }
}

我的绘图功能

function draw() {
    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.strokeStyle = x;
    ctx.lineWidth = y;
    ctx.stroke();
    ctx.closePath();
}

---

似乎正在按预期工作。起初我认为这与画布不在屏幕的0,0有关，但经过测试后，它仍然可以正常工作

您需要提供有关如何实现这些功能的更多信息

var canvas，ctx，flag=false，
prevX=0，
currX=0，
prevY=0，
咖喱=0，
dot_标志=假；
var x=“黑色”，
y=2；
函数绘图（）{
ctx.beginPath（）；
ctx.moveTo（prevX，prevY）；
ctx.lineTo（咖喱，咖喱）；
ctx.strokeStyle=x；
ctx.lineWidth=y；
ctx.stroke（）；
ctx.closePath（）；
}
函数init（）{
canvas=document.getElementById（'can'）；
ctx=canvas.getContext（“2d”）；
w=画布宽度；
h=画布高度；
canvas.addEventListener（“mousemove”，函数（e）{
findxy（'move'，e）
}，假）；
canvas.addEventListener（“鼠标向下”，函数（e）{
findxy（'down'，e）
}，假）；
canvas.addEventListener（“mouseup”，函数（e）{
findxy（'up'，e）
}，假）；
canvas.addEventListener（“mouseout”，函数（e）{
findxy（'out'，e）
}，假）；
}
函数findxy（res，e）{
如果（res=='down'）{
prevX=currX；
prevY=咖喱；
currX=e.pageX-canvas.offsetLeft；
currY=e.pageY-canvas.offsetTop；
console.log（e.pageX+“”+e.pageY）；
flag=true；
dot_flag=true；
if（dot_标志）{
ctx.beginPath（）；
ctx.fillStyle=x；
ctx.fillRect（currX，currY，2,2）；
ctx.closePath（）；
dot_标志=假；
}
}
如果（res==“向上”| res==“向外”）{
flag=false；
}
如果（res=='move'）{
国际单项体育联合会（旗）{
prevX=currX；
prevY=咖喱；
currX=e.pageX-canvas.offsetLeft；
currY=e.pageY-canvas.offsetTop；
draw（）；
}
}
}
init（）
一个代码片段可能有助于故障排除，因此您的回答让我找到了引导的问题。我不得不移除引导容器外部的画布，现在一切正常。谢谢
function draw() {
    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.strokeStyle = x;
    ctx.lineWidth = y;
    ctx.stroke();
    ctx.closePath();
}