JSFiddle - React, Tailwind, and code Playground

by matake

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
	})();
	
$( window ).resize(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)
  }
})