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

html canvas ios safari cross-browser HTML

Hey everyone, I'm running into an issue that's driving me crazy. I'm integrating two systems and I tried several approaches but none seem to work... I'm optimizing some code but I'm working on a personal project and I'm working with an scenario with rendering an HTML5 `<canvas>` element in iOS Safari. The canvas works perfectly in desktop browsers and Android devices, but on iOS, it just doesn't display anything. I've tested it on Safari 15 and 16, and the canvas appears blank without any errors in the console. Here's a snippet of my code: ```html <canvas id="myCanvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'blue'; ctx.fillRect(50, 50, 150, 100); </script> ``` I've also tried wrapping the drawing code in an event listener for the `DOMContentLoaded` event, but that didn't resolve the scenario. ```javascript document.addEventListener('DOMContentLoaded', () => { const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'blue'; ctx.fillRect(50, 50, 150, 100); }); ``` Furthermore, I checked the CSS and ensured that there's no `display: none;` or similar properties toggled. The canvas element is showing up in the DOM, but it just doesn’t render anything visually. Are there any known compatibility issues with the `<canvas>` element in iOS Safari or specific configurations I need to consider? Any insights or workarounds would be appreciated. I'd really appreciate any guidance on this. This is for a microservice running on macOS. Could someone point me to the right documentation? The project is a desktop app built with Html. Any examples would be super helpful. I'm working with Html in a Docker container on CentOS. I'd really appreciate any guidance on this.