👀 Views: 1378 💬 Answers: 1 📅 Created: 2025-08-23

html canvas edge javascript image-rendering JavaScript

I'm learning this framework and I'm building a feature where I'm working with an scenario with rendering images on an HTML5 `<canvas>` element in Microsoft Edge version 108 on Windows 11... When I attempt to draw an image using the `drawImage` method, the image appears distorted or not rendered at all. Here's the relevant part of my code: ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.src = 'path/to/image.png'; img.onload = function() { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; ``` The browser console doesn't show any errors, but sometimes I see a warning like "CanvasRenderingContext2D.drawImage: The source image is not fully loaded" when I refresh the page before the image loads. I have also tried using `img.complete` to check if the image was loaded before drawing, but I still encounter the same scenario. My canvas dimensions are set in the HTML as follows: ```html <canvas id='myCanvas' width='800' height='600'></canvas> ``` I tested the same code in Chrome and Firefox, and it works without any issues. I'm starting to wonder if this is a bug specific to Edge or if I'm missing something in my implementation. Any suggestions on how to resolve this rendering scenario in Edge? For reference, this is a production web app. Thanks for taking the time to read this! I'm working with Javascript in a Docker container on Ubuntu 20.04. Is there a better approach?