How to scale ctx2d canvas rendering so that for no matter the window proportions, the same amount is rendered, without any squish?

I’m working on a game, and I’ve created a background and a set of tiles. I am using an element called “canvas” for the canvas. Using ctx2d, I have created a set of grid tiles for the background. My code for such is as follows (the player being here is simply just a position so that the lines render relative to the player’s position).

for (let count = 0; count < size; count += 30) {
    ctx.beginPath();
        ctx.moveTo(0, (canvas.height / 2) - (player.y - count));
        ctx.lineTo(size, (canvas.height / 2) - (player.y - count));
        ctx.moveTo((canvas.width / 2) - (player.x - count), 0);
        ctx.lineTo((canvas.width / 2) - (player.x - count), size);
        ctx.stroke();
};

The issue with this is that, well, certain devices have different sizes. Here, I use a constant value for the difference between the lines (30). The issue is that my canvas resizes to the window.innerWidth and the window.innerHeight, so that the game doesn’t have a gaping white background behind some constant sized canvas. Because of this, different sized windows have different canvas sizes, and hence some windows render more than others. Is there a simple way that I can make it so that everything, not just the grid lines, will render so that basically the exact same image would be rendered at the exact same position, no matter the device, without the solution looking squished? I already attempted to fix this via ctx.scale, which did work, but it also severely squished the game and made it look ugly. Is there a way in which I can get something that will render at least about the same amount, no matter what the canvas size actually is, while still looking nice?