Javascript错误：未捕获范围错误：无法执行'；getImageData'；在'；CanvasRenderingContext2D'；：ImageData创建时内存不足

我在写一个简单的网络应用程序来画画。我正在为洪水填充工具编写代码。该工具适用于填充小空间，但对于大空间，它将填充一半，然后停止。我检查了控制台，它被垃圾邮件错误的

Uncaught RangeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': Out of memory at ImageData creation 

功能移动（e、s、c）{
如果（！e.value）
e、 style.right=s+“px”；
其他的
e、 style.right=c+“px”；
e、 value=！e.value；
}
函数fixGradient（）{
var=1=238；
var=2=221；
变量y=42；
var高度=50；
变量斜率=（颜色1-颜色2）/（0-高度）；
var截距=颜色1-（（斜率）*y）；
var screenHeight=window.innerHeight；
var bottomColor=数学圆（斜率*屏幕高度+截距）；
var color=“rgb（“+bottomColor+”，“+bottomColor+”，“+bottomColor+”）；
document.getElementById（“panel”）.style.backgroundImage=“线性渐变（#fcfc，“+color+”）”；
}
var colorValue=“#000000”；
函数setColor（颜色）{
ctx.fillStyle=颜色；
ctx.strokeStyle=颜色；
colorValue=color.toUpperCase（）；
}
var con=1/数学sqrt（2）；
var mouseDown=false；
var click=false；
变量大小=2；
var位置=[0,0,0,0,0,0,0,0,0]；
var-ctx；
var工具=0；
var帆布；
var busy=false；
函数集（t）{
刀具=数量（t）；
}
函数getFile（）{
document.getElementById（“bgchooser”）。单击（）；
}
职能小组（e）{
/*
var f=新文件读取器（）；
f、 readAsDataURL（el（“f”）.files[0]）；
f、 onload=函数（e）{
var b64=e.target.result；
el（“loc”）。值=b64；
改变（）；
}
*/
var file=e.files[0]；
var reader=新文件读取器（文件）；
reader.readAsDataURL（文件）；
reader.onload=函数（r）{
var b64=r.target.result；
canvas.style.backgroundImage=“url（“+b64+”）”；
}
}
window.onload=函数（）{
canvas=document.getElementById（“c”）；
addEventListener（“mousedown”，function（））{
mouseDown=true；
位置[6]=位置[0]；
位置[7]=位置[1]；
});
addEventListener（“mouseup”，function（））{
mouseDown=false；
});
window.addEventListener（“向下键”，函数（e）{
var keyCode=e.keyCode | | e.which；
如果（键代码==82）{
clearRect（0，0，canvas.width，canvas.height）；
}
});
addEventListener（“单击”，函数（）{
单击=真；
});
window.addEventListener（“mousemove”，函数（e）{
位置[4]=位置[2]；
位置[5]=位置[3]；
位置[2]=位置[0]；
位置[3]=位置[1]；
位置[0]=e.clientX；
位置[1]=e.clientY；
});
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
ctx=canvas.getContext（“2d”）；
var标度=[1,1]；
setInterval（函数（）{
固定梯度（）；
大小=编号（document.getElementById（“大小”）.value）*con；
document.getElementById（“显示”）.style.height=size+“px”；
document.getElementById（“liveDisplay”）.innerHTML=size+“px”；
ctx.lineWidth=尺寸；
比例[0]=canvas.width/window.innerWidth；
比例[1]=canvas.height/window.innerHeight；
如果（工具==0）{
canvas.style.cursor=“url（eyedrop.cur），crosshair”；
如果（鼠标向下）{
ctx.beginPath（）；
ctx.moveTo（位置[4]*刻度[0]，位置[5]*刻度[1]）；
ctx.lineTo（位置[2]*刻度[0]，位置[3]*刻度[1]）；
ctx.lineTo（位置[0]*刻度[0]，位置[1]*刻度[1]）；
ctx.stroke（）；
//填补空白
ctx.beginPath（）；
ctx.弧（位置[0]*比例[0]，位置[1]*比例[1]，大小/2，0，2*Math.PI，真）；
ctx.fill（）；
}否则{
//如果（单击和位置[6]==位置[0]&位置[7]==位置[1]）ctx.fillRect（位置[0]*比例[0]-（大小/2），位置[1]*比例[1]-（大小/2），大小，大小）；
位置[2]=位置[0]；
位置[3]=位置[1]；
位置[4]=位置[0]；
位置[5]=位置[1]；
单击=false；
}
}否则如果（工具==1）{
如果（鼠标向下）{
ctx.clearRect（位置[0]*刻度[0]-大小/2，位置[1]*刻度[1]-大小/2，大小，大小）；
}
}否则如果（工具==2）{
var x=位置[0]；
变量y=位置[1]；
var指数=x*4+y*canvas.width*4；
var imgdata=canvas.getImageData（0，0，canvas.width，canvas.height）；
var数据=imgdata.data；
}否则如果（刀具==3）{
//油漆桶可以取出，也可以不放入
var x=位置[0]；
变量y=位置[1]；
变种；
试一试{
idata=ctx.getImageData（0，0，canvas.width，canvas.height）；
}捕获（e）{
设置超时（100）；
idata=ctx.getImageData（0，0，canvas.width，canvas.height）；
}
变量idataindex=4*（x+y*画布宽度）
如果（鼠标向下）{
洪水（画布，ctx，x，y，[idata[idataindex]，idata[idataindex+1]，idata[idataindex+2]，idata[idataindex+3]，[255,0,0,255]）；
mouseDown=false；
}
}
}, 0);
}
函数getPixel（数据、x、y、宽度）{
返回[data[4*（y*宽度+x）]，data[4*（y*宽度+x）+1]，data[4*（y*宽度+x）+2]，data[4*（y*宽度+x）+3]；
}
功能扫描（x、y、o、n、c、t）{
log（“扫描：（“+x+”，“+y+”），旧的=新的：“+（o==n）+”，旧的：“+o+”，新的：+n）；
如果（o！=n）{
var data=t.getImageData（0，0，c.宽度，c.高度）；
如果（y！=0）{
var top=getPixel（数据，x，y-1，c.宽度）；
if（top[0]==o[0]&&top[1]==o[1]&&top[2]==o[2]&&top[3]==o[3]）{
t、 fillRect（x，y-1,1,1）；
扫描（x，y-1，o，n，c，t）；
}
}
如果（x！=c.宽度）{
var right=getPixel（数据，x+1，y，c.width）；
如果（右[0]==o[0]&右[1]==o[1]&右[2]==o[2]&右[3]==o[3]）{
t、 fillRect（x+1，y，1，1）；
扫描（x+1，y，o，n，c，t）；
}
}
如果（x！=0）{
var left=getPixel（数据，x-1，y，c.width）；
如果（左[0]==o[0]&左[1]==o[1]&左[2]==o[2]&左[3]==o[3]）{
t、 fillRect（x-1，y，1，1）；
扫描（x-1，y，o，n，c，t）；
}
}
如果（y！=c.高度）{
var bottom=getPixel（数据，x，y+1，c.宽度）；
如果（底部[0]==o[0]&底部[1]==o[1]&底部[2]==o[2]&底部[3]==o[3]）{
t、 菲尔尔