HTML Canvas Rendering guide on Responsive Design with Chrome 117
I'm trying to configure I'm prototyping a solution and I keep running into I'm working with a question with rendering an HTML canvas element responsively... I'm using a `<canvas>` to draw some shapes, but when I resize the window, the canvas content doesn't scale properly. Instead, it looks pixelated and distorted. I'm using CSS to set the width and height of the canvas like this: ```css canvas { width: 100%; height: auto; } ``` In my JavaScript, I'm initializing the canvas size based on the window's inner width and height: ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; draw(); // where I do my drawing } window.addEventListener('resize', resizeCanvas); resizeCanvas(); // initial call ``` The `draw()` function simply fills the canvas with a rectangle, but as I resize the window, the rectangle becomes distorted. I also tried keeping the canvas dimensions fixed using pixel values instead of percentages but that didn't solve the scenario either. Is there a best practice for maintaining the aspect ratio and keeping the rendering sharp during window resizing? I've checked the console for any errors but there's nothing unusual. The canvas is responsive in Firefox, but it seems to be a specific rendering scenario in Chrome 117. Any insights on how to handle this would be greatly appreciated! This is part of a larger CLI tool I'm building. How would you solve this? Am I approaching this the right way? Is this even possible? This is for a CLI tool running on Ubuntu 22.04. Thanks for taking the time to read this!