Why Does HTML Canvas Render Long Streak Artifacts on Extremely Wide JPEG Images?

The issue isn’t with your drawing code at all but rather with how some browsers or their JPEG decoders handle images with extremely large dimensions. In particular, images that have one dimension (in your case, width) far exceeding common limits tend to trigger low‐level bugs or rounding issues when drawn to a canvas. In many instances the artifact appears at roughly the same pixel position (around 75% of the width), suggesting that an internal limit (often around 32K pixels or similar) is at play.

There are a few workarounds you can try:

1. Tiling (Drawing in Segments)

Instead of drawing the whole image at once, break it up into smaller sections (tiles) and draw each section separately. For example:

JAVASCRIPTCopied
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const tileWidth = 1000; // or some width smaller than the suspect threshold
const image = new Image();
image.src = "https://i.sstatic.net/jUDJpnFd.jpg";
  
image.addEventListener("load", () => {
  // Scale factors for drawing
  const scale = canvas.width / image.width;
  const scaledTileWidth = tileWidth * scale;
  
  // Process in tiles along the width
  for (let sx = 0; sx < image.width; sx += tileWidth) {
    // The actual width of the tile might be less at the end
    const tileActualWidth = Math.min(tileWidth, image.width - sx);
    const dx = sx * scale;
    const dWidth = tileActualWidth * scale;
    ctx.drawImage(
      image,
      sx, 0, // source x, y
      tileActualWidth, image.height,
      dx, 0, // destination x, y
      dWidth, canvas.height
    );
  }
});

This approach avoids sending a massive one-shot draw command to your canvas and can sidestep internal bugs caused by extreme image dimensions.

2. Intermediate Resizing

Another approach is to use an off-screen canvas to progressively downscale the image in several steps. This reduces the image size gradually so that when you draw the final version it doesn’t trigger the bug.

3. Convert the Image Format

Since the issue seems tied to how the JPEG is decoded, converting the image to a different format (e.g., PNG) before using it in your canvas may help in some browsers.

Conclusion

The “streak” artifacts are due to browser/decoder limitations with very wide images rather than a problem with your code. Splitting the work into smaller drawing calls (tiling) or progressively rescaling the image can help avoid the bug and produce clean results.

Choose the workaround that best fits your application’s needs.