Использование рендеринга изображений: pixelated; заставляет движущееся изображение пульсации вертикальной линии пикселей

Question

Я пытаюсь создать простую игру на холсте javascript в настольном приложении, используя электрон. Я использую пиксельную графику, поэтому, чтобы мои пиксельные изображения оставались в хорошем качестве при масштабировании, я использую следующее CSS:

canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

К сожалению, так как игрок управляет Основной спрайт, заставляющий его двигаться влево и вправо, странный волновой эффект смещает линию через спрайт по мере его движения. Пример: https://imgur.com/a/MUCjv4W

Если я использую только четкие края, эта проблема исправлена, но, очевидно, из-за искусства теряется много качества.

Есть ли что я могу сделать, чтобы предотвратить этот эффект и просто сохранить каждый пиксель в правильном месте?

Answer 1

Если вы используете эту строку JavaScript, вы сможете удалить все эти CSS. Это отключит плавное масштабирование изображений и сохранит пиксельное качество.

Замените context контекстом 2D-холста.

context.imageSmoothingEnabled = false;