javascript - 仅当填充红色时，画布上的透明 div 才会留下较暗的区域

Question

我有一个画布作为背景，里面装满了从 html 相机拍摄的视频。

在该背景上，绘制了两个 div，并且通过对随机数进行排序来选择是否绘制一个或另一个。这样做，覆盖 div 会不断变化。

这两个 div 都是 60% 透明的，一个是红色的，另一个是绿色的。

我无法理解的令人惊奇的是，红色 div 在画布上留下了比绿色更暗的斑块。

如果我将红色 div 更改为蓝色，那么较暗的补丁就会消失。

如果有人帮助我解开这个谜团，我将不胜感激。

https://codepen.io/anon/pen/rgZLEW

红色或绿色的 div 是这样的：

function draw_green(){
  $('.preloader').hide();
  $('.green').show();
 }
function draw_red() {
  $('.preloader').hide();
  $('.red').show();
 }

而 div 只是：

<div class="main-wrapper"> 
  <div class="preloader green" style="display: none">
     <div class="loader-container">
        <div>
          <div class="text-logo">Green</div>
          </div>
      </div>
  </div>

  <div class="preloader red" style="display: none">
    <div class="loader-container">
      <div>
        <div class="text-logo">Red</div>
      </div>
    </div>
  </div>
  <canvas></canvas>

画布在循环函数内绘制：

navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
            stream.getTracks().forEach(function(track) {

              if (track.kind == 'video')
                      document.getElementById('video').srcObject = stream;
                  startLoop();
            });
        }, function(err) {
            alert('Could not acquire media: ' + err);
        });


    var canvas = document.querySelector('canvas');
    var video =  document.querySelector('video');
    var ctx = canvas.getContext('2d')
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      var loopFrame = false;
      function loop(){
        loopFrame = requestAnimationFrame(loop);
        ctx.save();
        ctx.drawImage(video, 0, 0, canvas.width,   canvas.height);
        ctx.restore();
      }

      function startLoop(){
        loopFrame = loopFrame || requestAnimationFrame(loop);
      }