JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<script src="https://raw.github.com/MikeMcTiernan/Janis/master/janis.js"></script>
<canvas id="paint"></canvas>

JavaScript

(function(w, d) {

    var canvas = d.querySelectorAll('#paint'),
        graphics;

    if (canvas[0].getContext) {
        graphics = canvas[0].getContext('2d');
    }

    (function draw() {
        var theme = ["#004488", "#0066aa", "#0088cc", "#00aaee", "#00ccff"],
            font = ["Arial", "Papyrus", "Baskerville"],
            x = Math.random() * 600,
            y = Math.random() * 150,
            size = (Math.random() * 50) + 10;

        graphics.font = size + "px '" + font[(Math.random() * 5 >> 0)] + "'";
        if (Math.random() > .5) {
            graphics.fillStyle = theme[(Math.random() * 5 >> 0)];
            graphics.fillText("LOL", x, y);
        } else {
            graphics.strokeStyle = theme[(Math.random() * 5 >> 0)];
            graphics.strokeText("ROFL", x, y);
        }


        t = setTimeout(draw, 950);
    })();
})(window, document);