JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementsByTagName('canvas')[0], sizeSet = false;
	ctx = canvas.getContext('2d');
	
	console.dir(ctx);
	
	(function(){
		var width = $(window).width(),
		height = $(window).height();
		canvas.width = width;
		canvas.height = height;
		sizeSet = true
	})()
	
	
	var count = 0;
	function someAnimation(){
		var x = Math.round(Math.random()*500), y = Math.round(Math.random()*500)
		ctx.strokeStyle = '#'+Math.round(Math.random()*16777215).toString(16);
		console.log(ctx.strokeStyle);
		ctx.beginPath();	
		ctx.rect(x,y,Math.round(Math.random()*30),Math.round(Math.random()*30));
		ctx.lineWidth = Math.round(Math.random()*10);
		ctx.shadowColor = "darkgrey";
		ctx.shadowBlur = Math.round(Math.random()*10);
		ctx.stroke();	
		ctx.closePath();
		count++;
		if(count<999){
			window.requestAnimationFrame(someAnimation)
		}
	}
	$(document).ready(function(){
		if(sizeSet){
		window.requestAnimationFrame(someAnimation)
		}
	})