画布透明fillStyle不能完全覆盖现有内容

Question

如果canvas fillStyle是透明的并且反复应用，则除非fillStyle颜色是黑色或白色，否则它不会完全覆盖现有内容。

您可以在以下链接中看到一个小提琴：https://jsfiddle.net/tgovrqhj/1/

<canvas id="black"></canvas>
<canvas id="grey"></canvas>
<canvas id="white"></canvas>

new Box("black", "rgba(0, 255, 0, 1)", "rgba(0, 0, 0, 0.05)");
new Box("grey", "rgba(0, 255, 0, 1)", "rgba(100, 100, 100, 0.05)");
new Box("white", "rgba(0, 255, 0, 1)", "rgba(255, 255, 255, 0.05)");

function Box(canvasId, textColor, overlayColor) {
    var canvas = document.getElementById(canvasId);
    var context = canvas.getContext("2d");

    context.fillStyle = textColor;
    context.font = "50px Arial";
    context.fillText("Text", 90, 80);

    setInterval(draw, 50);

    function draw() {
    context.fillStyle = overlayColor;
    context.fillRect(0, 0, canvas.width, canvas.height);
  }
}

共有3个框，每个框带有绿色文本。它们每个都覆盖有0.05不透明度的fillStyle；第一个带有黑色，第二个带有灰色，最后一个带有白色。

只有白色和黑色fillStyles可以完全覆盖文本，其他颜色则不能。

为什么会有这种差异，并且有一种方法可以使透明的fillStyle重复应用以完全覆盖现有内容。