Alpha blending never reaches opaque color in HTML Canvas

Question

Background

I am implementing an animation which requires trails behind moving objects based on their speed. The easiest way which people used for long time is to draw the object and then periodically fillRect() the scene with background color using small alpha values (~5%).

Problem

However, the background where particles were long time ago never reaches its original color:

It seems like true opaque color is never reached. In every browser I tested (FF, Chrome, Safari) it stops at rgba(12,0,0,1):

const ctx = document.getElementById('canvas').getContext('2d');
const count = document.getElementById('count');
const color = document.getElementById('color');

ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(0, 0, 100, 100);

var counter = 0;
ctx.fillStyle = 'rgba(0,0,0,0.04)';
window.setInterval(() => {
  ctx.fillRect(0,0,100,100);
  count.textContent = ++counter;
  const d = ctx.getImageData(50, 50, 1, 1).data;
  color.textContent = `${d[0]}, ${d[1]}, ${d[2]}, ${d[3] / 255}`;
}, 50);

<canvas id="canvas"></canvas><br/>
Count: <span id="count">?</span><br/>
rgba(): <span id="color">?</span>

Solution?

This problem seems to be described as far back as 2011 with no solutions (pixel manipulation causes an unacceptable CPU usage).

• Am I missing something?
• Is this an expected behavior as it's so consistent across all browsers?
• Is there any clever way around that except setting the background to non-black?