Javascript ImageData图形缩放不正确

该计划的想法是有一个地图的图像，并覆盖在地图上的黑色画布。然后用户将单击画布的某个部分，与喷漆工具类似，鼠标附近的像素将在画布上变得透明。因此，地图将显示（像战争类型的雾功能）。当我在画布左上角附近点击时，喷漆的效果与预期的差不多，但当我在画布上进一步向右和向下点击时，变得透明的像素会进一步向右和向下。。。你知道这里怎么了吗？代码如下：

//关于文档准备功能。
$（文档）.ready（函数（）{
canvas=document.getElementById（“myImageDisplayerCanvas”）；
drawingContext=canvas.getContext（“2d”）；
drawingContext.fillStyle=“#000000”；
drawingContext.fillRect（0,0800554）；
});
//喷漆逻辑。
var _intervalId，//用于跟踪当前间隔ID
_中心，//要喷洒的当前中心
密度=10，
半径=10，
绘制CxT，
左键点击按下，
drawingContext，
帆布；
函数getRandomOffset（）{
var randomAngle=Math.random（）*360；
var randomRadius=Math.random（）*半径；
返回{
x：数学cos（随机角度）*随机半径，
y:Math.sin（随机角度）*随机半径
};
}
this.startDrawing=功能（位置）{
_中心=位置；
leftClickPressed=true；
//每10毫秒喷洒一次
_intervalId=设置间隔（此值为10）；
};
this.moveDrawing=功能（位置）{
如果（左键单击已按下）{
clearInterval（_intervalId）；
_中心=位置；
//每10毫秒喷洒一次
_intervalId=设置间隔（此值为10）；
}
}
this.finishDrawing=功能（位置）{
clearInterval（_intervalId）；
leftClickPressed=false；
};
this.spray=函数（）{
var centerX=parseInt（_center.offsetX），
中心的=
parseInt（_center.offsetY），
我
对于（i=0；i

设置画布分辨率。
喷洒偏移的原因是您尚未设置画布分辨率。您可以通过画布元素宽度和高度属性设置分辨率

<canvas id="canvas" width="800" height="554"></canvas>

你真的是在循环中以1ms的间隔调用
getImageData
？我甚至不想按“运行代码片段”按钮。@kaido可以随意更改值或去掉间隔。没那么难。还有，你真的来这里就是为了这么说吗？