In testing DPR on different screens I realized that there is no reason to limit using ctx.scale() on high resolution displays. The canvas below is scaled by 2 on all displays, and even on a standard resolution display it should draw crisp lines!
Note: This scaling is different than the 4x CSS scaling that is being done on this page to make the canvases easier to see.
<canvas
id="canvas"
width="200" height="200"
style="width: 400px; height: 400px;"
></canvas>
Visually the 4x canvas on screen (unless you disable scaling below) looks 400px wide, it is rendered as if it is 200px wide, but your code thinks it is 100px wide.