画布上的透明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);
      }