Sei que essa pergunta já foi feita muitas vezes, mas tentei praticamente tudo o que consegui encontrar na rede e ainda não consigo fazer o texto renderizar corretamente na tela, independentemente do que (e com quaisquer combinações) tentei.

Para o problema de linhas e formas borradas, simplesmente adicionar + 0,5px às coordenadas resolveu o problema: no entanto, essa solução parece não funcionar para a renderização de texto.

Nota: Eu nunca uso CSS para definir a largura e a altura da tela (tentei apenas uma vez para verificar se a configuração das propriedades de tamanho em HTML e CSS mudaria alguma coisa). O problema também não parece estar relacionado ao navegador.

Eu tentei :

criando canvas com HTML, depois com javascript em vez de htmldefinindo largura e altura no elemento HTML, em seguida, com JS e, em seguida, com HTML e JSadicione 0,5 px às coordenadas do texto com todas as combinações possíveisalterando família de fontes e tamanho da fontealterando a unidade de tamanho da fonte (px, pt, em)abrir arquivo com diferentes navegadores para verificar se alguma coisa mudadesativando canal alfa usandocanvas.getContext('2d', {alpha:false}) que fez a maioria das minhas camadas desaparecer sem resolver o problema

Veja a comparação entre a tela e a renderização da fonte html aqui:https://jsfiddle.net/balleronde/1e9a5xbf/

É possível obter o texto na tela para renderizar como texto no elemento dom? Qualquer conselho ou sugestão seria muito apreciado