advanced patterns with SVG rendering in HTML5 Canvas on mobile browsers
This might be a silly question, but I am experiencing an scenario where SVG images render incorrectly when drawn onto an HTML5 Canvas on mobile browsers, specifically on iOS Safari and Chrome for Android. The SVG appears distorted and pixelated, despite being rendered correctly in desktop browsers. I'm using the latest version of Safari (15.1) and Chrome (96.0) on iOS and Android, respectively. To draw the SVG on the canvas, I am using the following code: ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.src = 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><rect width="100%" height="100%" fill="red"/><text x="10" y="50" font-size="20" fill="white">Hello</text></svg>'; img.onload = () => { ctx.drawImage(img, 0, 0); }; ``` However, when I test this on mobile devices, the SVG rendering looks blurry and the text appears to be rasterized poorly. I've tried setting the canvas size to match the SVG dimensions, but it doesn't seem to make a difference. Additionally, I am using the `image-rendering: crisp-edges;` CSS property, but it has no visible effect on the outcome. Is there a known scenario with SVG rendering on mobile browsers when using HTML5 Canvas? How can I ensure the SVG is rendered correctly without distortion? Any insights or workarounds would be greatly appreciated! I'm working on a service that needs to handle this. Is there a better approach?