JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Mhacom On Canvas</title>
    <script>
			
		var clockPulse,canvas,ctx, sin,cos;
		window.onload = function () {
			 canvas = document.getElementById("myCanvas");
			 ctx = canvas.getContext('2d');
			 sin = Math.sin(Math.PI / 20);
			 cos = Math.cos(Math.PI / 20);
			 ctx.translate(canvas.width / 1.5, canvas.height / 5);
			 clockPulse = setInterval(rotate, 200);
		}
		function rotate() {		   
			for (var i = 0; i <= 40; i++) {
				var r = Math.floor(255 * Math.random());
				var g = Math.floor(255 * Math.random());
				var b = Math.floor(255 * Math.random());
				ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
				ctx.fillRect(0, 0, 50, 50);
				ctx.transform(cos, sin, -sin, cos, 20, 20);
			}
}
	</script>
    <style type="text/css">
        canvas {
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
    </style>

</head>
<body>
    MK
    <canvas id="myCanvas" width="600" height="500"></canvas>
   <p align="center" style="font-size: 30px">Happy New Year.</p>

</body>
</html>