The HTML <canvas> consistently adds streak artifacts when it tries to render images with a width considerably longer than its height.

In my case, I am using a JPEG image whose dimensions are 42,577px (w) per 903px (h) (1.5MB) and drawing it normally to an HTML <canvas>.

But when the image is displayed in the canvas it always adds long streaks to the image starting at about 75% of the way across, all the way to the end of the image. I have tried this with many different images of approximately the same dimensions and it always does this: bad canvas render

I assumed the image might be too large so I scaled it down considerably. It seems at any size this image is rendered with the same streaks starting in about the same place.

This is one sample JPEG image that creates this problem in canvas: sample bad image

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const canvasWidth = 1000;
const image = new Image();
image.src = `.jpg`; // sample bad image from above above

image.addEventListener("load", (e) => {

  let width = image.width;
  let height = image.height;

  // Calculate the new dimensions while maintaining aspect ratio
  if (width > canvasWidth) {
    height *= canvasWidth / width;
    width = canvasWidth;
  }
  ctx.drawImage(image, 0, 0, width, height);
});

<canvas id="myCanvas" width="1000" height="100"/>