JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Best Selling Arcade Games</title>
	<link rel="stylesheet" href="css/screen.css">
</head>
<body>
	<header>
	<div class="container">
		<h1><span>Best selling arcade games of all time</span></h1>
		<button class="randomize"> randomize </button>
	</div>
	</header>
	<div class="container">
	<canvas id="canvas" width="960px" height="800px"><span></span></canvas>
	</div>
	<script src="js/app.js"></script>
</body>
</html>

JavaScript

(function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var height = -20;
var xPosNew = -950;
var turning = 0;
var button;
var dataName = ["Space Invaders","Street Fighter II","Donkey Kong","Pac-Man","Asteroids","Defender","Ms. Pac-Man","Centipede","Galaxian","StarHorse2","Donkey Kong Jr.","Mr. Do!","Tempest","Mortal Kombat II","Beatmania","Q*bert","Mortal Kombat","Robotron: 2084","Dig Dug","Pole Position","Popeye","Out Run","Pump It Up","Missile Command","Jungle Hunt","Dragon's Lair","Berzerk","Scramble","Battlezone","Stargate","Mushiking: King of the Beetles","Mahjong Fight Club 3","Sega Network Mahjong MJ4","Star Wars","Super Cobra","Space Duel","Pong","Breakout","Oshare Majo: Love and Berry","Sea Wolf"];
var dataSales = [360000,200000,132000,400000,100000,60000,125000,55988,40000,38614,30000,30000,29000,27000,25000,25000,24000,23000,22228,21000,20000,20000,20000,18000,16000,15780,15136,15122,15000,13500,13000,12892,12695,12337,12038,12000,11000,10300,10000,9000];
	function init() {

		button = document.querySelectorAll('.randomize');
		button[0].addEventListener("click" , randomize);
		window.requestAnimationFrame(draw);
		text();
	}
	function randomize(){

	}

	function draw(){
		height += 4;
        turning += 0.005;
        var maxBar = 0;
        var xPos = 0;
        var yPos = 555;
        var geel = 0;
        var blauw = 255;
        var groen = 255;
        var rotatie = 0;

        
		for (var i = 0; i < dataSales.length; i++) {
            			
                        maxBar = Math.max(maxBar, dataSales[i] / 800);
            			rotatie += 0.157;
						geel += 6;
						blauw += 6;
						groen -= 6;
						xPos += 23;
						ctx.save();
						ctx.beginPath();
						ctx.translate(480, 400);
						ctx.fillStyle= "rgb(" + geel + "," + groen + "," + blauw + ")";
						ctx.rotate(rotatie);
						ctx.rect(0,-155,15,-Math.min(height, dataSales[i] / 1800));
						ctx.fill();
						ctx.restore();


				}

   ...