javascript - 目的地アウトが白で塗りつぶされるのはなぜですか?

Question

だから私は最近、パーティクルシステムでよく遊んでいます。花火を作ろうと思っていたのですが、「トレイル」の作り方を学ぶ過程で行き詰まりました。私が理解している限り、塗りつぶしスタイルが rgba(0,0,0,0.5); の場合、globalcompositeoperation の destination-out はキャンバス上に黒い透明な画像を置く必要があります。しかし、奇妙なことに、これを行うとキャンバスが白くなります。ここでなぜ、または何が間違っているのかわかりません。ここにペンがあります

window.reqFrame = (function() {
  return window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.requestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

var canvas, ctx;
var W = window.innerWidth;
var H = window.innerHeight;
particles = [];


function particle() {
  this.x = W / 2;
  this.y = H / 2;
  this.vx = -4;
  this.c = "#FF0000";
}

particle.prototype.draw = function() {
  ctx.moveTo(this.x, this.y);
  ctx.lineTo(this.x - 4, this.y);
  ctx.strokeStyle = "#FF0000";
  ctx.stroke()
}

particle.prototype.update = function() {
  this.x += this.vx;
}


function loop() {
  ctx.globalCompositeOperation = "destination-out";
  ctx.fillStyle = "rgba(0,0,0,0.5)";
  ctx.fillRect(0, 0, W, H);
  ctx.globalCompositeOperation = "source-over";
  particles[0].draw();
  particles[0].update();
  reqFrame(loop);
}

function paintRect(color, x, y, w, h) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, w, h);
}

function paintCanvas(color) {
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, W, H);
}

function init() {
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  canvas.width = W;
  canvas.height = H;
  particles.push(new particle());
  loop();

}

init();

body {
  overflow: hidden;
}

<canvas id="canvas"></canvas>

私が取り組んでいることに。これは私がグローバルコンポジットを扱っているだけなので……そうです。