Acabo de encontrar un comportamiento inesperado en el elemento HTML Canvas; Traté de desmenuzar el problema tanto como pude. En resumen, parece que ctx.fillText no puede representar el texto en regiones específicas del lienzo.

Este es el script más pequeño que pude escribir para reproducir el error de manera consistente (lo probé en diferentes máquinas, sistemas operativos y navegadores). Crea un lienzo negro (1,25×1,25 en unidades de espacio de dibujo, 1000×1000 en píxeles, el origen del espacio de dibujo está en el medio) y dibuja puntos rojos cuando pasa el mouse sobre él, pero hay varias franjas horizontales en las que falla para hacerlo

 // define boundaries of drawing space const left = -.625; const tops = -.625; const scale = 800; const width = 1.25; const height = 1.25; // create canvas let canvas = document.createElement("canvas"); canvas.width = scale * width; canvas.height = scale * height; canvas.style.backgroundColor = "black"; document.body.appendChild(canvas); // create context let ctx = canvas.getContext("2d"); ctx.scale(scale, scale); ctx.translate(-left, -tops); ctx.textBaseline = "middle"; ctx.textAlign = "center"; ctx.font = `.03px arial`; ctx.fillStyle = "rgba(208, 64, 64, 1)"; // coordinates follow mouse addEventListener("mousemove", event => { let mouseX = left + event.layerX / scale; let mouseY = tops + event.layerY / scale; ctx.fillText(".", mouseX, mouseY); });

Puede pegarlo en sus herramientas de desarrollo en aproximadamente: en blanco y verlo por sí mismo. En cualquier caso, aquí también hay un gif:

Como puede ver, quedan varias franjas horizontales intactas, a pesar de que las paso con el mouse. Además, la totalidad del 80 % inferior del lienzo no se ve afectada.

Algunas notas importantes:

• Esto ocurre con cualquier texto, pero utilicé el punto porque ocupa la menor cantidad de espacio, mientras que los símbolos más grandes llenaron fácilmente los espacios en la parte superior y dificultaron la visualización.
• El evento mousemove no es el culpable, mouseX y mouseY se actualizan correctamente y sin problemas.
• No se debe a que mi mouse se arrastra demasiado rápido, deja espacios sin importar cuán lento me mueva.
• No se debe a lo pequeña que es la escala, ya que la dimensión x tiene la misma escala que la dimensión y , pero la primera no presenta este problema.
• Esto no ocurre con el método ctx.strokeText , que funciona bien.
• Tampoco ocurre con ctx.fillPath .

¿Estoy haciendo algo mal? ¿O es esto realmente un error?