1

¡Muy buenas tardes!, pues así tal cual,resulta que el canvas se encuentra desenfocado... ¡No entiendo porque si con otros proyectos no esta desenfocado!, No me sirve usar:

image-rendering: pixelated;

de css, ya que esto soluciona el problema solo para aquellos elementos que no tienen curvas... pero resulta que mi canvas tiene elementos con curvas, como la pelota (Que es un circulo hecho con la función arc) y el texto, el canvas tiene este aspecto... (Abrir la imagen para verla como yo la veo en mi pc):

introducir la descripción de la imagen aquí Este es el html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <script src="scripts/ball.js"></script>
    <script src="scripts/bar.js"></script>
    <script src="scripts/arkanoid.js"></script>
    <script src="scripts/assets.js"></script>
    <script src="scripts/main.js"></script>
    <title>Arkanoid</title>
</head>
<body>
    <canvas id="canvas">¡Este elemento no esta soportado para su navegador!</canvas>
</body>
</html>

Y este es el css:

*{
    margin: 0;
    padding: 0;
}

canvas{
    display: block;
    width: 100vw;
    height: 100vh;

}

El caso es que no creo que sea por el width: 100vw y height: 100vh, ya que tengo otro juego en el cual use una de estas dos medidas (El vh), y no se desenfoca en lo absoluto, va perfecto!, ese otro juego utiliza la medida de 100vh. y le puse una medida statica en el width en pixeles y nada se desenfoca... ¡Nisiquiera el texto!, no comprendo por que en este si...

posdata: si uso:

image-rendering: pixelated;

el texto y la pelota ya no se ven desenfocadas si no que se ven muy pixelados.

5
  • Esto pasa porque estiras el canvas para que cubra toda la ventana. La solución es: 1. borra estas dos reglas del css: width: 100vw; height: 100vh; 2. utiliza javascript para dar una altura y una anchura al canvas: canvas.width = window.innerWidth; canvas.height = window.innerHeight;También necesitaras utilizar un event listener para detectar cuando la ventana cambia de tamaño (resize`) y volver a calcular el tamaño del canvas.
    – enxaneta
    Commented el 18 mar. 2019 a las 19:33
  • Por favor lea esta respuesta: Ampliar lienzo de un canvas sin alterar el contenido
    – enxaneta
    Commented el 18 mar. 2019 a las 19:35
  • Entiendo... pero todos los elementos estan desenfocados, sin embargo, podrias porfavor mirar este video desde el minuto 47:10 hasta el minuto 48:37??, es que a este sujeto le funcióno sin que se le desenfocara el canvas y sin utilizar una función de escalado como tu dices (Vi el video completo), el nisiquiera empleo medidas vh y vw empleo porcentajes que es aún mas extraño: youtube.com/watch?v=ju09womACpQ
    – Layer
    Commented el 18 mar. 2019 a las 19:45
  • En este caso image-rendering: pixelated; funciona porque todo lo que tiene dibujado en el canvas son rectángulos. En tu caso no funciona porqué tu pelota es redonda.
    – enxaneta
    Commented el 18 mar. 2019 a las 20:06
  • 1
    Quiero darte como respuesta, me funcióno lo que tu dices en el código, muchas gracias.
    – Layer
    Commented el 18 mar. 2019 a las 20:33

2 respuestas 2

2

Esto pasa porque estiras el canvas para que cubra toda la ventana. La solución es:

  1. borra estas dos reglas del css:

    width: 100vw; height: 100vh;

  2. utiliza javascript para dar una altura y una anchura al canvas:

    canvas.width = window.innerWidth; canvas.height = window.innerHeight;

3.También necesitaras utilizar un event listener para detectar cuando la ventana cambia de tamaño (resize) y volver a calcular el tamaño del canvas

OJO: el evento resize se dispara con una frecuencia muy alta, y esto lo hace inapropiado para tareas complicadas como recalcular posiciones de elementos DOM. Para poder hacerlo es recomendable utilizar el método setTimeout o requestAnimationFrame para reducir la frecuencia con la cual se dispara el evento resize.

setTimeout(function() {
    init();
    addEventListener('resize', init, false);
  }, 15);

donde init() es una función que se encarga de todo.

0

solo tienes que cambiar a false la propiedad imageSmoothingEnabled del contexto del canvas.

ElementoCanvas.getContext("2d").imageSmoothingEnabled = false;

Tal que así.

En caso de que tengas en tu código algún tipo de bucle para redibujar los elementos en el canvas, debes ponerlo dentro de ese bucle, de otra manera solo se ejecutara al dibujar el primer fotograma, es decir, si tu juego se dibuja 60 veces por segundo pues solo la vez 1 se pondrá pixelada y las demás veces se vera como en tu ejemplo del problema.

No es de css pero mucho mas simple y solo es una linea. es pero que te ayude o ayude a gente con la misma duda.

Ejemplo:

    //DECLARACION DEL CONTEXTO DE CANVAS
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');

    let bucle = {
      fps: 0,
      iter: null,
      ultimo_registro: 0,
      
      iniciar: registro => {
        bucle.iter = window.requestAnimationFrame(bucle.iniciar);
        /*despues de que pase un segundo se cumple la condición.            (milisegundos por ello el 999 por qué 1000 ms es un segundo)*/
        if(registro - bucle.ultimo_registro > 999){
          bucle.ultimo_registro = registro;
          //solo para imprimir las veces que se repite por segundo.
          console.log('Veces por segundo: ', bucle.fps);
          bucle.fps = 0;
        }else{}
        
        //metodo para dibujar elementos en canvas
        bucle.dibujar(registro);
      },
      dibujar: registro => {
        bucle.fps += 1;
        /*solo se pone en false esta propiedad (NO ES NECESARIO QUE SEA IGUAL EL BUCLE AL QUE YO TENGO IMPLEMENTADO AQUI, SOLO QUE CUMPLA CON PONER EN FALSE CONTINUAMENTE LA PROPIEDAD, al menos a así me ha funcionado).*/
        ctx.imageSmoothingEnabled = false;
      }
    }

    bucle.iniciar();
<!DOCTYPE html>
<html lang="es">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo</title>
</head>
<body>
  <canvas id="canvas" width="1204" height="1204"></canvas>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.