HTML5 Canvas Rendering Issues in Firefox with SVG Images - Seeking Cross-Browser Solutions
After trying multiple solutions online, I still can't figure this out. I'm working on a project and hit a roadblock. I'm working with an scenario where my HTML5 canvas is not rendering SVG images correctly in Firefox, while it works perfectly in Chrome and Edge. I've implemented a simple canvas drawing application, and I'm using the following code to draw an SVG image onto the canvas: ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" fill="red" /></svg>'; ``` In Firefox, the canvas appears blank when I load the page, but it displays the SVG correctly in Chrome. I've checked the console and I’m not seeing any errors related to CORS or resource loading. I've tried using an external SVG file by changing the `img.src` to a URL instead of a data URL, but it still doesn’t render in Firefox. Is there a known scenario with Firefox handling SVG data URLs within canvas, or is there something I need to adjust in my code? Any suggestions on how to make this work across all browsers would be greatly appreciated! I'm currently testing on Firefox version 94.0 and Chrome version 95.0. For context: I'm using Javascript on Windows. Any ideas what could be causing this? I'm working on a CLI tool that needs to handle this. Any advice would be much appreciated.