JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

JavaScript

// F U CSS!!
var canvas = document.createElement('canvas'),
    body = document.getElementsByTagName('body')[0];
    body.style.backgroundColor = '#222';
    body.appendChild(canvas);
var cStyle = "background: red; width: 100%";
    canvas.setAttribute("style", cStyle);   
    canvas.width = 1200;
    canvas.height = 800;

// Context
var c = canvas.getContext('2d');

// The RAF
var rAF = window.requestAnimationFrame ||         window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        return setTimeout(callback, 1000 / 60);
    };

var an1 = 1; 
var length =0;
var one = 1;
// The Loop
function loop() {
c.fillRect(0,0,canvas.width,canvas.height);
c.clearRect(0,0,canvas.width,canvas.height);
c.font = "16px arial";
c.fillText( loop.rand   , 10, 20);

    
var rand = ~~( 5 * Math.random() ) ;   

var start = 200;    
var end = 300;
var maxLength = 300;
    
c.beginPath();
c.moveTo(canvas.width/2,canvas.height/2);    
c.lineTo(an1 ,an1 );
c.lineWidth = 20;
c.fillStyle =     
c.stroke();

    an1 += one;
length =  Math.sqrt( (Math.pow(an1,2) + Math.pow(an1,2))) ;
    
   length > 50 ? one = -one : null;
    
    console.log(length);
    rAF(loop);
}



// The Init
rAF(loop);