皮希。js在渲染700×700网格时崩溃

我想显示一个700乘700的网格。皮希。js在渲染时崩溃。同样的代码适用于100×100网格。

var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x2c3e50
});
document.body.appendChild(app.view);

 const PE_COLOR = 0xe2b692; // 0xf5912f;
 const PE_WIDTH = 20;
 const PE_HEIGHT = 20;
 const VIZ_AREA_VIEWPORT_SIZE = 750;
 const VIZ_AREA_FABRIC_VIEWPORT_INIT_RATIO = 2;
 const VIZ_AREA_VIEWPORT_MAX_SCALE = 20;
 const VIZ_AREA_VIEWPORT_MIN_SCALE = 0.25;
 const VIZ_AREA_WIDTH_GAP = 0.5;
 const VIZ_AREA_HEIGHT_GAP = 0.5;

const ROUTER_OFFSET = 6;
const ROUTER_RADIUS = 3;
const PE_BORDER_COLOR = 0x0f0f0f;
const ROUTER_COLOR = 0x1d58a6; //0x1F1F1F;
const CE_COLOR = 0x1d5866;
const CE_OFFSET = 12;
const CE_SIZE = 4;

const width = 700;
const height = 700;

const box = new PIXI.Graphics();
app.stage.addChild(box);

for (let i = 0; i < width; ++i) {
    for (let j = 0; j < height; ++j) {
        const x = i * PE_WIDTH + i * VIZ_AREA_WIDTH_GAP;
        const y = j * PE_HEIGHT + j * VIZ_AREA_HEIGHT_GAP;
        box.lineStyle(1, PE_BORDER_COLOR, 0.4);
        box.beginFill(PE_COLOR, 0.8);
        box.drawRoundedRect(x, y, PE_WIDTH, PE_HEIGHT, 2);
        box.endFill();

        box.lineStyle(1, ROUTER_COLOR, 0.2);
        box.beginFill(ROUTER_COLOR, 0.4);
        box.drawCircle(x + ROUTER_OFFSET, y + ROUTER_OFFSET, ROUTER_RADIUS);
        box.endFill();

        box.lineStyle(1, CE_COLOR, 0.2);
        box.beginFill(CE_COLOR, 0.4);
        box.drawRect(x + CE_OFFSET, y + CE_OFFSET, CE_SIZE, CE_SIZE);
        box.endFill();
    }
}

代码绘制了一个700乘700的网格。

这就是我在100×100网格上尝试输出时的样子:

有关于如何修复撞车的提示吗?