javascript-canvas-putImageData并不总是有效

在画布中恢复背景时遇到问题。我有一个画布,它的大小取决于选项的内容(它可能会变得很大),我在画布上画满了图像,现在我想用一个指示器来显示鼠标的位置,它的格式类似于网格。问题是,红色框被绘制,但背景不会在下次重新绘制 curX 或 curY 已更改。

我注意到的一个奇怪的部分是,当我把鼠标移到黑色区域时,红色框似乎是深红色的,但当我在同一点上来回移动时,红色似乎变得更强烈。有时,我之前画的红色方框也会变得更牢固,而不必重新访问这些区域,就像一条小路正在形成。

只有有时背景才会返回,但通常是在我离开该区域时。

<canvas id="leveldraw" onmousemove="getMouse(event)" onmouseout="stopMouse()" width="0" height="0"></canvas>

...

var oldBlk = null;
...
function getMouse(e)
{
    var offsetpos = recursive_offset(canvas);
    var oldX = curX;
    var oldY = curY;
    mouseX = e.clientX + offsetpos.x + (canvas.offsetLeft/2);
    mouseY = e.clientY + offsetpos.y + (canvas.offsetTop/2)+24;
    curX = Math.floor(mouseX/24);
    curY = Math.floor(mouseY/24);
    if(oldX!=curX || oldY!=curY)
    {
        if(oldBlk != null)
            ctx.putImageData(oldBlk,(oldX*24)-24,(oldY*24)-24);
        oldBlk = ctx.getImageData((curX*24)-24,(curY*24)-24,72,72);
        ctx.lineWidth="1";
        ctx.strokeStyle="red";
        ctx.rect(curX*24,curY*24,24,24);
        ctx.stroke();
    }
}
function stopMouse()
{
    ctx.putImageData(oldBlk,(curX*24)-24,(curY*24)-24);
    oldBlk = null;
}

recursive_offset() : Get mouse position in scrollable div

我甚至尝试过在整个画布上获取ImageData,但似乎没有效果。可能在离开画布时它确实还原了整个背景,但当我回到画布时,红色的盒子又回来了。