Почему при масштабировании изображения на странице в canvas оно замыливается, и как этого избежать?

Question

[Y23]

Почему при масштабировании изображения на странице в canvas оно замыливается, и как этого избежать?

Comments

[Максим Тимофеев]

Следить за соотношением сторон?

Answer 1

[Александр Коротаев]

дело в том. что canvas поддерживает субпиксельный рендеринг, чтобы его отключить надо либо увеличивать изображение кратно целым числам, либо использовать свойство CSS

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                            */
}