JSFiddle - React, Tailwind, and code Playground

by icodeforlove

CSS

body {
    background-color: #ccc;
}

JavaScript

function Canvas ($config) {
    this._loop = this._loop.bind(this);

    this.canvas = this._createCanvas($config.width, $config.height);
    document.body.appendChild(this.canvas);
    
    this._imageData = this.canvas.context.createImageData($config.width, $config.height);
    
    
    this.canvas.addEventListener('mousemove', function (event) {
        this.x = event.x;
        this.y = event.y;
    }.bind(this));
    
    this._draw();
}

Canvas.prototype = {
    _loop: function () {
        this._draw();

        clearTimeout(this._timeout);
        this._timeout = window.setTimeout(this._loop, 0);
    },

    _draw: function () {
        var canvas = this.canvas,
            context = canvas.context,
            imageData = this._imageData;

            
        //for (var i = 0; i < 400000; i++) this._setPixel(imageData, Math.floor(Math.random() * canvas.height), Math.floor(Math.random() * canvas.height), [Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), 255]);
        
        //this._setPixel(imageData, this.x + 5, this.y - 5, [Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), 255]);
        //this._setPixel(imageData, this.x - 5, this.y - 5, [Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), 255]);
        //this._setPixel(imageData, this.x + 5, this.y + 5, [Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), 255]);
        //this._setPixel(imageData, this.x - 5, this.y + 5, [Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), 255]);
        
var DRAGON = (function () {
    // MATRIX MATH
    // -----------

    var matrix = {
        mult: function ( m, v ) {
            return [ m[0][0] * v[0] + m[0][1] * v[1],
                        m[1][0] * v[0] + m[1][1] * v[1] ];
        },

        minus: function ( a, b...