JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

JavaScript

var arrayAnimation = [];
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext('2d');
var arrayAnimaion = [];
window.x = 0;
window.y = 0;
window.last = {};
window.last.x = 0;
window.last.y = 0;
window.color = 0;

Animate(function () {

    c.beginPath();
    c.moveTo(0, 0);
    c.lineTo(window.x++, window.y++);
    c.stroke();
    c.closePath();
}, false);

function Animate(val, repeat) {
    arrayAnimaion.push((function () {
        return (function () {

            val();
            return repeat || false;
        })();
    })());
};
requestAnimationFrame(function () {
    window.update();
    arrayAnimation = arrayAnimation.filter(function (e) {
        //(new Function('update();'))();

        return e();
    })

});

window.update = function () {
   

    window.last.x = window.x;
    window.last.y = window.y;
    window.x += Math.round(canvas.width * Math.random());
    window.x =  Math.round(window.x % canvas.width);
    window.y +=  Math.round(canvas.height * Math.random());
    window.y =  Math.round(window.y % canvas.height);
Animate(function () {

    c.beginPath();
    c.lineWidth = '1';
    c.strokeStyle = '#' + (window.color++).toString(16);
 window.color = window.color % (16777215/3);
    c.lineTo(window.last.x, window.last.y);

    c.lineTo(window.x, window.y);
    c.stroke();
    c.closePath();
    //   setTimeout(looper);
}, false);

}
setTimeout(function repeater() {
    window.update();
    setTimeout(repeater );
});
//setInterval(update,16);

function looper() {
    // setTimeout(update);
}