0

Tenho um canvas de width = 400 mas, com Style.width = 100%, a imagem interpola e os ângulos retos do pixels embaçam. Eu quero manter os pixels bem visíveis, se alguém puder me ajudar fico muito grato.

0

1 Resposta 1

0

CSS3 tem uma propriedade chamada image-rendering, que você seta como pixelated. Pelo menos o Chrome suporta: https://www.chromestatus.com/feature/5118058116939776

Só não vai ficar muito bonito, salvo quando o width efetivo for um múltiplo inteiro de 400.

Copiado de outra resposta, mais antiga, do SO em inglês:

canvas {
  image-rendering: optimizeSpeed;             /* Older versions of FF          */
  image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
  image-rendering: -webkit-optimize-contrast; /* Safari                        */
  image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
  image-rendering: pixelated;                 /* Awesome future-browsers       */
  -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}

Você deve fazer log-in para responder a esta pergunta.