Using image-rendering: pixelated; causes moving image to ripple a vertical pixel line

Question

I'm attempting to create a simple javascript canvas game in a desktop app using an electron. I'm using pixel art, so in order to keep my pixel art images to stay in good quality as they scale, I am using the following CSS:

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

Unfortunately, as the player controls the main sprite to make it move left and right, a strange ripple effect shifts a line through the sprite as it moves. Example: https://imgur.com/a/MUCjv4W

If I only use crisp-edges, this problem is fixed, but obviously a lot of quality is lost from the art.

Is there anything I can do to prevent this effect and just keep each pixel in its correct place?

Answer 1

If you use this line of JavaScript, you should be able to remove all of that CSS. This will disable the smooth upscaling of images and keep the pixelated quality.

Replace context with your 2D canvas context.

context.imageSmoothingEnabled = false;