Dejo que el usuario elija una imagen, convierto el objeto de File resultante en un ImageBitmap usando createImageBitmap() , represento ese ImageBitmap en un <canvas> sin escala aplicada, luego amplío ese lienzo usando CSS diciendo:

 canvas{ transform-origin: top left; transform: scale(2); image-rendering: pixelated; }

Cuando selecciono un archivo. El valor debe crear una imagen donde cada píxel sea consistentemente cuadrado. En este caso, pasando de 1x1 a 2x2.

Sin embargo, por alguna razón, mi resultado se ve así:

Observe cómo algunos píxeles se representan 1x1, otros 2x2 y algunos incluso parecen ser 1x2 o 2x1. ¿Por qué está pasando esto?

Fragmento para demostrar aún más el problema:

 const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const img = document.createElement("img"); img.src = "https://oops-studio.com/downloads/demospritesheetforso.png";// I'm confortable using a remote image as the source here since I own this domain and can guarantee that the image will not be removed img.addEventListener("load", () => { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img,0,0); });

 body{ background: black; } canvas{ transform-origin: top left; transform: scale(2); image-rendering: pixelated; }

 <canvas id="canvas"></canvas>

Después de algunas pruebas más, parece ser un problema con mi PC de alguna manera. Lo probé tanto en Opera como en Edge (no tengo nada más instalado) y siempre fue incorrecto. Lo probé en otra máquina (en Opera) y funciona perfectamente.

¿Alguna idea de por qué es eso?