Glitch when scaling transparent image using drawImage

Question

I'm trying to scale an image with transparent pixels using CanvasRenderingContext2D.drawImage, but whenever I draw the image what I end up getting is both the original size image and the scaled version drawn on the canvas. Here is some code to reproduce the glitch:

<canvas id="cvs" width=200 height=100></canvas>

const canvas = document.getElementById('cvs');
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
const imageData = ctx.createImageData(100, 50);
const data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
  if (i % 400 > 360) {
    data[i]     = 255;
    data[i + 1] = 0;
    data[i + 2] = 0;
    data[i + 3] = 255;
  }
  else {
    data[i]     = 0;
    data[i + 1] = 0;
    data[i + 2] = 0;
    data[i + 3] = 0; // Change this to 255 to get rid of the glitch
  }
}
ctx.putImageData(imageData, 0, 0);
ctx.drawImage(canvas, 0, 0, 100, 50, 0, 0, 200, 100);

https://jsfiddle.net/o4sv6qhb/2/

I don't understand why this is happening. If I don't use any transparent pixels then the problem goes away.

I guess a workaround would be to fill the pixels of the final size image directly and not use the scaling from drawImage, but I would rather not have to do this.

Answer 1

You are drawing to the canvas twice, once with putImageData at a scale of 1:1 pixels and then again using drawImage at your scaled up version.

The second draw overlaps the first, so if you have no transparent pixels you just can't see the original image because it is being painted over.

But if you do have transparent pixels then the larger image doesn't draw over the image behind and you get the old image showing through.

If you only want the image from your drawImage command, you could try creating a separate canvas to paint your imageData to and then draw that canvas onto the first, but scaled up.

const canvas = document.getElementById('cvs');

// create a second hidden canvas/context pair
const offscreenCanvas = document.createElement('canvas');
const hiddenContext - offscreenCanvas.getContext('2d');

const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
const imageData = ctx.createImageData(100, 50);
const data = imageData.data;

for (var i = 0; i < data.length; i += 4) {
  if (i % 400 > 360) {
    data[i]     = 255;
    data[i + 1] = 0;
    data[i + 2] = 0;
    data[i + 3] = 255;
  }
  else {
    data[i]     = 0;
    data[i + 1] = 0;
    data[i + 2] = 0;
    data[i + 3] = 0; // Change this to 255 to get rid of the glitch
  }
}

// draw to the hidden canvas
hiddenContext.putImageData(imageData, 0, 0);

// draw the hidden canvas content to the visible one and scale
ctx.drawImage(hiddenContext, 0, 0, 100, 50, 0, 0, 200, 100);