Text in between two images

[helloitsme]

Hello,
sorry for the beginner Question, currently I am beginning using Pixi and it's quite overwhelming to start with.

I created a fake 3D image with the help of a replacement map:

 

  let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight});
  document.body.appendChild(app.view);

  let img = new PIXI.Sprite.from("image.jpg");
  img.width = window.innerWidth;
  img.height = window.innerHeight;
  app.stage.addChild(img);

  depthMap = new PIXI.Sprite.from("image-map.jpg");
  app.stage.addChild(depthMap);

  displacementFilter = new PIXI.filters.DisplacementFilter(depthMap);
  app.stage.filters = [displacementFilter];

  window.onmousemove = function(e) {
    displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) /20;
    displacementFilter.scale.y = (window.innerHeight / 2 - e.clientY) /20;
  };

That works great so far.

I would like to use it as a background for a website.

On top of that image I need to write text which should NOT be affected by the displacement filter.
That would be easy but above the text I need another image which is also manipulated by the displacement filter.
The text is so to speak "sandwiched" and partly visible (because the top image will cover parts of the text).

Additionally it would be great if I can change / access the text via JavaScript.

Me questions are now:

- What do you consider best practice for that? Should I create two canvas with HTML text in between? Or should I add the text with Pixi?
- How would a good solution look like?

Thank you very much in advance and for your patients, I know that noobie questions are quite annoying sometimes but it's really hard for me finding a solution here.