HTML <canvas> not rendering correctly on high DPI displays in Chrome 117
I've been banging my head against this for hours. I'm working on a web application that uses an HTML `<canvas>` element to render some graphics. However, I've noticed that the graphics appear blurry on high DPI displays (like Retina displays) when viewed in Chrome 117. I've tried adjusting the canvas size directly in JavaScript to match the device pixel ratio, but the scenario continues. My current setup looks like this: ```javascript const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); const dpr = window.devicePixelRatio || 1; canvas.width = 500 * dpr; canvas.height = 400 * dpr; context.scale(dpr, dpr); // Drawing a simple rectangle context.fillStyle = 'blue'; context.fillRect(10, 10, 100, 100); ``` After adjusting the width and height properties of the canvas, the rectangle appears fine, but the overall quality still seems off, especially with text rendering. When I try to use `context.font` to draw text, it looks pixelated. I also checked the CSS, and my `<canvas>` is set with: ```css #myCanvas { width: 500px; height: 400px; } ``` The CSS width and height do not match the actual pixel dimensions set in JavaScript, which I thought would help, but it seems to be causing the text to render inconsistently. I've tried different combinations of scaling and resizing, but nothing seems to yield a crystal-clear output. Is there a recommended approach for handling `<canvas>` rendering on devices with high DPI screens? What am I missing here? Any insights would be greatly appreciated!