Сетка на холсте HTML5

Question

Я создаю игру HTML5 canvas и хочу создать сетку. Карта бесконечна, и я хочу, чтобы на земле была сетка. Но что бы я ни делал, то же самое становится все медленнее и медленнее со временем и просто становится слишком медленным, чтобы играть. Вот моя текущая функция сетки рисования.

function drawGrid() {
    for (x=0;x<=canvas.width;x+=80) {
        ctx.moveTo(x, offset[0] % 80);
        ctx.lineTo(x, canvas.height + offset[0] % 80);
    }
    for (y=0;y<=canvas.height;y+=80) {
        ctx.moveTo(offset[1] % 80, y);
        ctx.lineTo(canvas.width + offset[1] % 80, y);
    }
    ctx.stroke();
}

Я Просто не совсем понимаю, почему она становится такой медленной.

РЕДАКТИРОВАТЬ: холст очищается каждый кадр, рисуя прямоугольник над всем, и эта функция запускает каждый кадр

Я также не думаю, что это другая часть моего кода. Если я запускаю ее без этой функции, она не запаздывает.