JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='c' style='position:absolute; left:0px; top:0px;'>
		</canvas>

CSS

html, body {
		  width: 100%;
		  height: 100%;
		  margin: 0px;
		  border: 0;
		  overflow: hidden; /*  Disable scrollbars */
		  display: block;  /* No floating content on sides */
      }

JavaScript

Math.map = function (value, istart, istop, ostart, ostop) {
    return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
  }
  
var
canvas = document.getElementById('c'),
ctx = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
maxVelocity = height * 0.00067;
velocity = height * 0.00019;

var mapStart = width* ((height * 0.00019)/maxVelocity) ;


velocityInterval = setInterval(function(){
			velocity+= height * 0.000001;
			if(velocity > maxVelocity) velocity = maxVelocity;
      var mappedValue = Math.map((width * (velocity / maxVelocity)), mapStart, width, 0, width);
			ctx.fillRect(1, height / 2, mappedValue, height / 30);
}, 1);