I am drawing a byte array of image data to a canvas with putImageData. The image data has some transparency, but when I draw multiple images to the canvas I don't see any overlap. In other words, I get this:

But I want this:

I am clearly not understanding something about how alpha compositing works in Javascript/HTML, and I hope someone can help me with this problem. Thanks!

Sample code:

const arr = new Uint8ClampedArray(4*100*100);

for (let i = 0; i < arr.length; i += 4) {
  arr[i + 0] = 255;
  arr[i + 1] = 0;
  arr[i + 2] = 0;
  arr[i + 3] = 100;
}

let imageData = new ImageData(arr, 100);

context.putImageData(imageData, 0, 0);
context.putImageData(imageData, 50, 50);