HTML5 Canvas - 每帧重绘网格会降低帧速率

Question

我正在HTML5 Canvas中的每一帧重绘一个网格，它在一个循环中这样做。这会导致帧速率每20秒左右下降并继续下降。

网格的代码具体在第179行：https://jsfiddle.net/9v8tr9Lm/（也在下面）。删除这两个循环确实可以防止帧速率下降。这个问题让我想知道在地球上我将如何绘制一个世界地图，好像我有一个数值数组，我需要循环遍历它们就像我对网格一样？

任何想法如何保持网格而不允许帧速率下降？

网格的JavaScript：

for (i$ = 0.5; i$ < 641; i$ += 32) {
  x = i$;
  $g.context.moveTo(x, 0);
  $g.context.lineTo(x, 640);
}
for (i$ = 0.5; i$ < 641; i$ += 32) {
  y = i$;
  $g.context.moveTo(0, y);
  $g.context.lineTo(640, y);
}
$g.context.strokeStyle = '#ddd';
$g.context.stroke();