JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<canvas id='c'></canvas>

JavaScript

var r = 1,
    g = 1,
    b = 1;
var can = document.getElementById('c'),
    c = can.getContext('2d');
can.width = can.height = 500;
c.translate(250, 250);
c.fillStyle = "RGBA(255,255,255,.02)";
var proxy = function proxy(c) {
    var _proxy = Object.create(null),
        _a = [],
        _obj = c;
    _proxy.run = function () {
        _a.forEach(function (e) {
            e();
        });
    };
    Object.getOwnPropertyNames(Object.getPrototypeOf(c)).concat(Object.getOwnPropertyNames(c)).forEach(function (e) {
        if (typeof _obj[e] === "function") {
            _proxy[e] = function () {
                var args = arguments;
                _a.push(function () {
                    _obj[e].apply(_obj, args);
                });
            };
        } else {
            _proxy[e] = function () {
                var args = arguments;
                _a.push(function () {

                    _obj[e] = args[0]();
                });
            };
        }

    });
    return _proxy;
};
var log = proxy(c);
log.save();
//log.fillRect(-250,-250,500,500);



log.beginPath();
log.moveTo(-50, -50);
log.lineTo(50, -50);
log.lineTo(50, 50);
log.lineTo(-50, 50);
log.rotate(Math.PI / 360);
log.translate(1, 1);
log.closePath();
log.restore();
log.translate(1, 1);
log.rotate(Math.PI / 180);

log.strokeStyle(function () {
    if (r > 255) r = -255;
    r += 10 * Math.random();
    if (g > 255) g = -255;
    g += 25 * Math.random();
    if (b > 255) b = -255;
    b += 7 * Math.random();
    return "rgba(" + Math.abs(r | 0) + "," + Math.abs(g | 0) + "," + Math.abs(b | 0) + ",1);";
});
log.stroke();



requestAnimationFrame(function repeater() {
    log.run();
    requestAnimationFrame(repeater);
});