Para obtener una solución a este problema, primero comprendamos el problema ¿Por qué ocurre este problema?
La respuesta a esta pregunta son los píxeles de la pantalla. La cantidad de desenfoque a menudo depende del navegador o del dispositivo que esté utilizando para ver el lienzo. Las proporciones de píxeles varían para diferentes dispositivos, por lo que podemos ver efectos borrosos.
Solución al problema:
Podemos resolver este problema usando la propiedad window.devicepixelratio
El devicePixelRatio de la interfaz de Windows devuelve la proporción de la resolución en píxeles físicos a la resolución en píxeles CSS para el dispositivo de visualización actual. Este valor también podría interpretarse como la proporción de tamaños de píxeles: el tamaño de un píxel CSS al tamaño de un píxel físico.
En términos más simples, esto le dice al navegador cuántos de los píxeles reales de la pantalla deben usarse para dibujar un solo píxel CSS.
Veamos un ejemplo de cómo se ve nuestra salida sin usar devicePixelRatio:
Ahora escribamos algo de código para resolver este problema:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas"
style="border:1px solid #d3d3d3;">
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//window.devicePixelRatio=1; //Blury Text
window.devicePixelRatio=2; //Clear Text
//(CSS pixels).
//Display Size
var size = 150;
canvas.style.width = size + "px";
canvas.style.height = size + "px";
var scale = window.devicePixelRatio;
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);
//CSS pixels for coordinate systems
ctx.scale(scale, scale);
ctx.font = '10px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var x = size / 2;
var y = size / 2;
var textString = "GEEKS FOR GEEKS";
ctx.fillText(textString, x, y);
</script>
</body>
</html>
Producción:
Después de incluir window.devicePixelRatio , verifiquemos el resultado de nuestro código:
Hemos asumido ambas condiciones aquí, cuando mantenemos window.devicePixelRatio = 1, podemos ver el efecto borroso, pero cuando mantenemos el valor en 2, podemos ver que obtuvimos texto claro. Esto se debe a que un valor de 1 indica una pantalla clásica de 96 DPI (76 DPI en algunas plataformas) , mientras que se espera un valor de 2 para pantallas HiDPI/Retina.
Publicación traducida automáticamente
Artículo escrito por atharvapaliwal7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA