HTML5 Canvas：绘制单行会导致视觉错误

Question

我正在使用用户可以滚动的“无限”画布在线游戏的地图编辑器/视线计算器。我的目标是从玩家的位置（当前是静态的）到光标位置绘制一条线。到目前为止，我可以很好地绘制线条，但是当我滚动画布足够远时，我会得到一个非常糟糕的视觉错误。似乎draw()功能不再正确清除屏幕。我可以通过删除该代码块来确认该行是罪魁祸首。

我的（精简版）drawLine()函数：

function drawLine() {
    context.beginPath();
    context.moveTo(150, 300);
    context.lineTo(Mouse.x, -Mouse.y);
    context.lineWidth = 1;
    context.stroke();
    context.closePath();
}

我的draw()函数（变量grid只是一个重复模式）：

function draw() {
    context.clearRect(-translatedX, -translatedY, window.innerWidth, window.innerHeight);
    context.rect(-window.innerWidth, -window.innerHeight, window.innerWidth * 2, window.innerHeight * 2);
    context.fillStyle = grid;
    context.fill();
}

我的pan()函数触发onmouseove：

function pan(e) {
    var evt = e || event;

    if(dragging == true) {
        deltaX = evt.offsetX - lastX;
        deltaY = evt.offsetY - lastY;
        translatedX += deltaX;
        translatedY += deltaY;
        context.translate(deltaX, -deltaY);
        lastX = evt.offsetX;
        lastY = evt.offsetY;
    }

    Mouse = {
        x: evt.offsetX - (window.innerWidth / 2 + translatedX),
        y: evt.offsetY - (window.innerHeight / 2 + translatedY)
    }

    draw();
}

如果需要更多信息，我很乐意提供。

编辑：更新了屏幕截图和链接：

http://iamchristopher.ca/editor/

Answer 1

我一直在努力解决这个问题，我想我找到了解决方案。我仍然不知道为什么我的行导致了这个问题，但答案是修改context.rect()以包含翻译的坐标：

context.rect(-window.innerWidth - translatedX, -window.innerHeight + translatedY, window.innerWidth * 2, window.innerHeight * 2);

现在一切似乎都运转正常。再次感谢@Patashu。