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

html canvas cors mobile HTML

I'm working through a tutorial and I'm relatively new to this, so bear with me. I'm having trouble rendering images onto an HTML `<canvas>` element on mobile browsers. The canvas works perfectly on desktop, but on both iOS and Android devices, the images are not displaying. I’m using the latest versions of Chrome and Safari on mobile. Here’s the code I’m using to draw the image on the canvas: ```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.crossOrigin = 'anonymous'; // Setting cross-origin img.src = 'https://example.com/image.png'; img.onload = () => { ctx.drawImage(img, 0, 0); }; img.onerror = (e) => { console.behavior('Image failed to load:', e); }; </script> ``` When I check the console on mobile, I see the behavior message: `Failed to load resource: net::ERR blocked by CORS policy`. I’ve verified that the image source allows CORS requests by checking the headers, and I've also tried setting the `crossOrigin` attribute to different values (like 'use-credentials'), but nothing seems to work. Could this be an scenario with how the mobile browsers handle CORS for `<canvas>`? Are there any workarounds or best practices to ensure images can be rendered on the canvas across all devices? Has anyone else encountered this? Is this even possible?