JSFiddle - React, Tailwind, and code Playground

by Vince

HTML

<canvas id="ctx"></canvas>
<div id="info"></div>

CSS

html, body {
	display: block;
	margin: 0;
}
#ctx {
	display: block;
	outline: 1px dotted grey;
}

JavaScript

var pi = Math.PI;
var x = '';
for (var i = 0; i < 10; i++) {
	x += Math.atan2(pi, i) + '<br>';
}
var c = document.getElementById('ctx');
var ctx = c.getContext('2d');
var wWidth = window.innerWidth;
var wHeight = window.innerHeight;
ctx.width= wWidth;
ctx.height= wHeight;
/*
for (var i = 0; i < 100; i++ ){
	var a = Math.atan2(Math.PI, i) * 50;
	ctx.fillRect(a, i, i+1, i+1);
}
*/
var i = 0;
function change(a, i) {
	ctx.clearRect(0, 0, wWidth, wHeight);
	ctx.fillRect(a, i, i, i);
}
var t = setInterval(function () {
	if (i != 100)
	{
		var a = Math.atan2(i, Math.PI);
		change(a, i);
		i++;
	}
}, 5);

//ctx.fillRect(25, 25, 100, 100);
// console.log(ctx);