👀 Views: 0 💬 Answers: 1 📅 Created: 2025-09-06

html canvas ie11 HTML

I'm wondering if anyone has experience with I'm dealing with I'm working on a HTML5 application that utilizes the `<canvas>` element for drawing graphics. The problem arises when I try to scale the canvas element for responsive design. In Chrome and Firefox, the graphics render fine, but in Internet Explorer 11, the drawing appears distorted after applying CSS scaling. I've tried setting the width and height attributes directly on the canvas to mirror the CSS, as well as using `context.scale()` to adjust the drawing based on the canvas size. However, the output is still incorrect. Below is a simplified version of my code: ```html <canvas id="myCanvas" width="400" height="300" style="width: 100%; height: auto;"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // Initial drawing ctx.fillStyle = 'blue'; ctx.fillRect(10, 10, 100, 100); // Try to scale var scaleFactor = window.innerWidth / 800; // Assuming 800 is the base width ctx.scale(scaleFactor, scaleFactor); // Additional drawing ctx.fillStyle = 'red'; ctx.fillRect(200, 50, 100, 100); </script> ``` In IE11, the blue square appears smaller than expected, and the red square looks stretched. I've also confirmed that the canvas' CSS width and height are being interpreted correctly, but the actual drawing seems to ignore the scaling factor entirely. Has anyone encountered this issue with IE11 and found a solution to render the canvas correctly irrespective of the scaling applied? Any insights or workarounds would be greatly appreciated! This is part of a larger web app I'm building. Is there a better approach? My development environment is macOS. Am I missing something obvious? My development environment is Linux. Any help would be greatly appreciated!