HTML Canvas – too many rectangles break page

My page breaks (chrome oops page) when I try to draw a large number (+5000) of rectangles on my canvas using:

rectangle:

ctx.rect(x,y,options.missSize,options.missSize);
ctx.stroke();

However, my page does not break if I draw the same number of circles, triangles or X’s using any of the following:

circle:

ctx.beginPath();
ctx.arc(x,y,options.missSize/2,0,2*Math.PI);
ctx.stroke();

X:

ctx.beginPath();
ctx.moveTo(x - options.missSize/2, y - options.missSize/2);
ctx.lineTo(x + options.missSize/2, y + options.missSize/2);
ctx.stroke();
ctx.moveTo(x + options.missSize/2, y - options.missSize/2);
ctx.lineTo(x - options.missSize/2, y + options.missSize/2);
ctx.stroke();

triangle:

ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x+(options.missSize/2), y+options.missSize);
ctx.lineTo(x-(options.missSize/2), y+options.missSize);
ctx.lineTo(x, y);
ctx.stroke();

Why would rect cause my page to crash, when none of the other draw functions have any issues?


Source: html5

Leave a Reply