If you’re building a canvas scene and want a clean fullscreen grid without wrestling layout math, this kirupa guide keeps it straightforward.
Good reference for getting the sizing and redraw logic right.
1 Like
I like this kind of “boring” tutorial because it nails the one thing people skip: you have to recalc on resize and redraw, not just stretch the canvas with CSS and hope. If anyone follows it, make sure you’re handling devicePixelRatio too or the grid lines will look weirdly soft on retina screens.
Retina softness is so real — I’ve been burned by that “why does this look slightly blurry” thing more times than I wanna admit.
One tiny trick that saved me: for 1px grid lines, draw them on half-pixels (like x + 0.5, y + 0.5) so the stroke lands clean instead of getting anti-aliased into mush. Kirupa has a solid writeup on the whole crisp-canvas-lines thing too if anyone wants to nerd out a bit deeper.
the double-scaling thing is the silent killer here — you “fix” dpr and then accidentally fix it again and suddenly your 1px grid is doing cardio.
i’ve had decent luck with the translate-once approach too: scale to dpr, ctx.translate(0.5, 0.5), then keep everything on integer coords and leave lineWidth = 1 alone. it’s way less error-prone than sprinkling +0.5 everywhere, especially once you start panning/animating the grid.
@Quelly, When you mention “panning/animating the grid, ” are you doing fractional zoom (like 1. 25x) or just integer steps, because at 1. 25x I keep seeing that slow “breathing” shimmer even with translate-once? not sure about that detail.
Yeah fractional zoom will do that — 1. 25x basically guarantees subpixel rounding jitter as you pan, so the lines “breathe” even if your translate is stable. i’ve had better luck snapping the grid to device pixels (or rendering it as an image/canvas at the current scale) instead of relying on 1px CSS borders at fractional scales.
