绘制网格画布时代码挂起

Question

我正在尝试在画布中绘制网格。网格的间距为10，每个网格点的大小为1.但是当我运行此代码时，我的浏览器会挂起很长时间，并且网格看起来像一个实心框。我检查了无限循环，但据我所见，没有。所以我不知道这里出了什么问题。剪辑没有悬挂问题，但也画了一个丑陋的盒子，而不是一个漂亮的网格。

欢迎提出建议！

如果有什么不明确的地方让我知道，我可以解释一下。

var canvas;
var grid_spacing = 100;
var points = [];

$(document).ready(function(){
	canvas = document.getElementById('index-canvas');
	setup_grid();
	for (var i = 0; i < points.length; i++) {
		points[i].draw();
	}
});



function setup_grid(){
	if (canvas.getContext) {
		var canvas_context = canvas.getContext('2d');

		for (var x = grid_spacing; x < window.innerWidth-grid_spacing; x+=grid_spacing) {
			for (var y = grid_spacing; y < window.innerHeight-grid_spacing; y+=grid_spacing) {
				points.push(new Plus_icon(x,y, canvas_context));
			}
		}
	}
}


class Plus_icon{
	
	constructor(x,y,c){
		this.x = x;
		this.y = y;
		this.c = c;
	}

	draw(){
		this.c.ellipse(this.x, this.y, 5, 5, Math.PI, 0, 2 * Math.PI);
		this.c.fillStyle = '#ff0000';
		this.c.fill();
	}
}

#index-canvas{
	width: 500px;
	height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="index-content">
		<canvas id="index-canvas"></canvas>
	</div>