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.
