根据背景更改文本颜色

Question

我有一个动画背景（它不是纯色，但实际上是画布动画），但每个“结尾”都会有两种特定的颜色。我想要一些位于动画顶部的文字来改变颜色，这样当它位于两个打火机的顶部时它是黑色的，而在两个较暗的顶部它是白色的。

为了说明，请参阅下面的简化代码段，其中包含更简单的动画背景（距离黑色不太远，但距离白色很远）

window.addEventListener("load", function() {
  var ctx = c.getContext("2d");

  function draw(timestamp) {
    ctx.fillStyle = "#BDDAE4";
    ctx.fillRect(0, 0, c.width, c.height);

    var x = (timestamp / 50) % (c.width + 40) - 40;
    ctx.fillStyle = "#79B3C9";
    ctx.fillRect(x, 40, 40, c.height - 40);

    ctx.fillRect(0, c.height - 40, c.width, c.height);

    window.requestAnimationFrame(draw);
  }
  window.requestAnimationFrame(draw);
}, false);

* {
  margin: 0;
  padding: 0;
}
div {
  overflow: scroll;
  height: 40px;
  position: relative;
}
div p {
  font-size: 2em;
  mix-blend-mode: difference;
  color: white;
  position: fixed;
  pointer-events: none;
  top: 0;
}

<div>
  <canvas id="c" height="120" width="100"></canvas>
  <p>TEXT</p>
</div>
<p>(Scroll on the text to see)</p>

我认为如果有办法，它将包括混合混合模式和/或过滤器。