<canvas id="scrollingCanvas" width="300" height="50"></canvas>

<div class="author"><a href="https://www.psd-dude.com/scrolling-text/">Scrolling text</a> by PSDDude
<br/>
<a href="https://www.coding-dude.com/wp/css/scrolling-text-using-html/">Scrolling Text Using HTML</a> by CodingDude
</div>

:root{
  display:flex;
  flex-direction:column;
  align-content:center;
  justify-content:center;
  height:100dvh;
  background:black;
  font-family:sans-serif;
  color:white;
}

canvas{
  margin:0 auto;
  display:block;
  background-color:white;
}
.author{
  position:fixed;
  bottom:1em;
  right:1em;
  font-size:clamp(16px,4dvh,32px);
  color:white;  
}

.author a{
  color:#afa;
  font-weight:bold;
}

  const canvas = document.getElementById('scrollingCanvas');
  const ctx = canvas.getContext('2d');
  const text = "Scrolling Text Example";
  let x = canvas.width;

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    ctx.font = '20px Arial';
    ctx.fillStyle = 'black';
    ctx.fillText(text, x, 30);
    x -= 2; // Adjust speed of scrolling here
    if (x < -ctx.measureText(text).width) {
      x = canvas.width; // Reset position when text is out of view
    }
    requestAnimationFrame(draw);
  }

  draw();