Measure the CSS box before setting pixels
Read the displayed canvas dimensions, multiply by the chosen device scale, set the backing width and height, and transform drawing coordinates so game logic can continue using CSS-space units. Reapply the transform after changing width or height, since assigning those canvas attributes resets its drawing state.
Compare a one-pixel grid, diagonal edges, and small UI text at scale factors such as 1, 1.5, and 2. Check both sharpness and responsiveness. A full devicePixelRatio multiplier is a starting point, not a rule that every game should follow; lowering the render scale can reduce cost on dense displays while leaving the CSS layout unchanged.
Treat resizing and memory as part of the choice
Backing-store pixel count grows with both dimensions, so doubling scale in each direction creates four times as many pixels. Test a busy scene at the largest supported display size and look for memory pressure or slower redraws before shipping a high-density setting.
MDN's canvas guidance shows a devicePixelRatio-based setup. WebGL's best-practices page calls out subtleties with non-integer ratios and zoom. Recheck after browser zoom or moving a window between displays, and avoid repeatedly resetting the backing store if its effective dimensions have not changed.
Questions about canvas device pixel ratio game
Should canvas width always equal CSS width times devicePixelRatio?
No. That can sharpen content but multiplies work and memory. Compare a full-resolution version with a capped scale using the same scene and visual checks.
Why does drawing become blurry after resizing?
Changing canvas width or height clears its bitmap and resets context state. Recompute its backing dimensions, scale the context again, and redraw the scene.