Is it possible to use a static background behind an animated canvas with mix-blend-mode?

Question

I'm trying to create an animation where each element would change its colour based on the parent div's background. I'm using pts.js to make the animation. It draws everything on a canvas.

Here's my setup: fiddle.

After adding mix-blend-mode: difference; to the canvas, the whole gradient background disappears despite the fact that the canvas (#pt) has its background set to transparent. I want the animated lines to dynamically change their colour just like the static text does. How can I achieve it? Is it even possible with pure CSS?

score 1 · Accepted Answer · answered Oct 23 '19 at 13:50

You can put the gradient on top of the canvas (using a ::before psuedo-element), and then mix-blend-mode will work:

$(document).ready(() => {
  Pts.namespace(window);
  const run = Pts.quickStart("#pt", "transparent");
  let pts = new Group();
  space.add({
    start: () => {
      pts = Create.distributeRandom(space.bound, 50);
    },
    animate: (time, ftime) => {
      const perpend = new Group(
        new Pt(0, 0),
        new Pt(0, window.innerWidth)
      ).op(Line.perpendicularFromPt);
      pts.rotate2D(0.0055, space.center);
      pts.forEach((p, i) => {
        const lp = perpend(p);
        form.stroke(`rgba(255,255,255,255`, 1.01).line([p, lp]);
        form.fillOnly(`#000000`).point(p, 1);
      });
    },

  });
  space.bindMouse().bindTouch().play();
});

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
}

#staticBg {
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  position: fixed;
}

#staticBg::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 60%);
  content: '';
  mix-blend-mode: difference;
  z-index: 1;
}

#pt {
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  position: fixed;
}

.text {
  color: white;
  font-size: 50px;
  text-align: center;
  width: 100vw;
  mix-blend-mode: difference;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pts/0.8.8/pts.min.js"></script>
<div id="staticBg">
  <canvas id="pt"></canvas>
  <div class="text">TEST STRING</div>
</div>

Your version simply doesn't show the animation. The text also isn't visible on Chromium 77.0 [That's](https://imgur.com/f59ksRZ) how it looks after running the code snippet. — Tomasz Kasperczyk, Oct 23 '19 at 13:55
Surprisingly, on Firefox it works correctly. I guess it's a problem with Chromium. Thank you. — Tomasz Kasperczyk, Oct 23 '19 at 14:10
I've tried it on Chrome (not Chromium), and it works as well. Your welcome. — Ori Drori, Oct 23 '19 at 14:15

Is it possible to use a static background behind an animated canvas with mix-blend-mode?

1 Answers1