👀 Views: 24 💬 Answers: 1 📅 Created: 2025-06-10

html canvas safari mobile HTML

I'm working on a personal project and I'm working with an scenario with rendering a `<canvas>` element in a web app when viewed on Mobile Safari 15. The canvas is used to draw an image, and the question arises when the viewport is resized. The image appears distorted and doesn't maintain its aspect ratio. I've tried setting the width and height attributes directly on the `<canvas>`, but it doesn't seem to fix the scenario. Here’s the relevant code snippet: ```html <canvas id="myCanvas" width="500" height="300"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.src = 'path/to/image.jpg'; img.onload = () => { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; </script> ``` I noticed that when I resize the window, the image does not scale properly, and when I check the Safari console, I see the following warning: "Canvas element's width and height must be defined in CSS or attributes to avoid scaling issues." I've attempted to add CSS styles to ensure the canvas fills the container, but it didn’t help: ```css #myCanvas { width: 100%; height: auto; } ``` Despite these adjustments, the image still scales incorrectly. Is there a proper way to handle canvas resizing in Mobile Safari that preserves the aspect ratio? Any insights would be greatly appreciated! I'm working on a API that needs to handle this. Am I missing something obvious?