JSFiddle - React, Tailwind, and code Playground

by Oleh Kotsubko

HTML

<div id="border">
   <canvas id="bannershow" width="500" height="150" />
</div>

JavaScript

var globalx = 500;
                    var vector = -1;
                    var interval = 120;
                    var canvas = document.getElementById('bannershow');
                    var ctx = canvas.getContext('2d');
                    var fontsize = 80;
                    var canvasHeight = 150;
                    var canvasWidth = 500;
                    const data = 'Helvetica is the new font Helvetica is the new font'

                    function banner() {

                        ctx.clearRect(0, 0, canvasWidth, canvasHeight);    
                        ctx.fillStyle = 'rgb(0, 0, 0)';
                        ctx.fillRect (0, 0, canvasWidth, canvasHeight);

                        ctx.fillStyle = 'rgba(255, 255, 255, 0.4)'
                        ctx.font = fontsize + 'px Helvetica';
                        ctx.textBaseline = 'top';
                        if (globalx < 0 - ctx.measureText(data).width) {
                             globalx = canvasWidth;
                        }                        
                        ctx.fillText(data, globalx, (canvasHeight-fontsize)/2);

                        globalx += vector;
                        window.requestAnimationFrame(banner);
                    }
                    
                    window.requestAnimationFrame(banner);