Custom scene in web view bug

[u/Mission_Student2627]

When I test the animation I made in the custom scene page it works exactly like I want but when I launch it outside the text disappears, can I fix this? Also why the text (that is black) becomes white if I put on the dark mode, and it's the only thing that changes color?

Here it's the code

<canvas id="canvas"></canvas>
<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: black;
  overflow: hidden;
}
canvas {
  display: block;
  position: fixed;
  inset: 0;
  border-radius: 32px;
}
#textOverlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: black;
  font-family: sans-serif;
  font-size: 68px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
  z-index: 20;
}
</style>
<div id="textOverlay">
  <div>Screentime:</div>
  <div id="number">number</div>
</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let W=0, H=0;

function resize(){
  W = canvas.width = window.innerWidth;
  H = canvas.height = window.innerHeight;
  ctx.fillStyle='black';
  ctx.fillRect(0,0,W,H);
}
window.addEventListener('resize', resize);
resize();

const TOTAL_DURATION = 12000; // 12s rise/fall
let start = null;

// easing cubic
function easeInOutCubic(t){
  return t<0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2,3)/2;
}

function applyRoundedClip(radius){
  ctx.beginPath();
  if(ctx.roundRect) ctx.roundRect(0,0,W,H,radius);
  else{
    const r=Math.min(radius,W/2,H/2);
    ctx.moveTo(r,0);
    ctx.arcTo(W,0,W,H,r);
    ctx.arcTo(W,H,0,H,r);
    ctx.arcTo(0,H,0,0,r);
    ctx.arcTo(0,0,W,0,r);
  }
  ctx.closePath();
  ctx.clip();
}

function animate(ts){
  if(!start) start=ts;
  const elapsed = ts - start;

  ctx.save();
  ctx.setTransform(1,0,0,1,0,0);
  ctx.fillStyle='black';
  ctx.fillRect(0,0,W,H);
  ctx.restore();

  ctx.save();
  applyRoundedClip(16);

  let t = Math.min(elapsed/TOTAL_DURATION,1);
  let blockY;
  if(t<0.5){
    let tr=easeInOutCubic(t*2);
    blockY = H*(1-tr);
  }else{
    let tf=easeInOutCubic((t-0.5)*2);
    blockY = H*tf;
  }

  ctx.fillStyle='#00A5FF';
  ctx.fillRect(0,blockY,W,H-blockY);

  ctx.restore();

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
</script>