👀 Views: 85 💬 Answers: 1 📅 Created: 2025-06-11

canvas high-dpi retina HTML

I'm working with an scenario with the `<canvas>` element in my web application that seems to only affect high-DPI (Retina) displays. I am trying to draw a simple rectangle on the canvas, but it appears blurry and improperly scaled. Here’s the code I'm currently using: ```html <canvas id="myCanvas" width="200" height="100"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'blue'; ctx.fillRect(10, 10, 150, 50); </script> ``` When I test this on a standard display, it renders perfectly, but on my MacBook with a Retina display, the rectangle looks pixelated. I’ve tried adjusting the width and height attributes of the canvas to match the device's pixel ratio: ```javascript const scale = window.devicePixelRatio; canvas.width = 200 * scale; canvas.height = 100 * scale; ctx.scale(scale, scale); ``` However, this doesn’t seem to solve the scenario. I also checked the CSS and made sure there’s no scaling applied there. The console doesn't show any errors, but the output is still not what I expect. Is there a recommended way to handle canvas rendering on high-DPI displays to ensure that it appears crisp and clear? Any insights or best practices would be greatly appreciated.