I'm writing a basic multiplayer game and working on client rendering of data sent by the server, but have been stumped on this question for a few days.

Basically, the game map is 6000x6000 (when the player reaches -3000 or 3000 on either the x or y, it stops moving). Relative to the player coordinates (the viewport is determined by a translation of the player to 0,0), a grid is drawn behind the player, giving the sense of movement. However, I would like to have the grid only extend to the edges of the 6000x6000 area, so that the player can see they have reached the end of the map.

Initially, I tried using the player coordinates to determine whether the edge of the map is visible, and in that case only draw behind or ahead of the player in order to denote the map end.

my draw function looks like this:

/*
 * Function drawBoard - draws grid on canvas
 * takes 2 args, height, width of game canvas
*/
var drawBoard = function(w, h) {
    ctx.beginPath();
    
    // vertical lines
    for (x = 0; x <= w; x += 50) {
        // draw after player
        // -3000, 3000 is map top right
        if (ship.pos.x >= (-3000-(w/2))) {
            ctx.moveTo(x+ship.pos.x, 0);
            ctx.lineTo(x+ship.pos.x, h);
        }

        // draw before player
        // 3000, 3000 is map top left
        if (ship.pos.x <= (3000+(w/2))) {
            ctx.moveTo(ship.pos.x-x, 0);
            ctx.lineTo(ship.pos.x-x, h);
        }
        
        // horizontal lines
        for (y = 0; y <= h; y += 50) {
            if (ship.pos.x >= (-3000-(h/2))) {
                ctx.moveTo(0, y+ship.pos.y);
                ctx.lineTo(w, y+ship.pos.y);
            }

            if (ship.pos.x <= (3000+(h/2))) {
                ctx.moveTo(0, ship.pos.y-y);
                ctx.lineTo(w, ship.pos.y-y);
            }
        }
    }
    ctx.strokeStyle = "gray";
    ctx.stroke();
    
    ctx.closePath();

};

I looked around extensively for a similar problem, but couldn't find any, so I'd appreciate a few tips/pointers on how to solve this.