JSFiddle - React, Tailwind, and code Playground

by Tiago Marinho

HTML

<script src="http://static.tumblr.com/uzcr0ts/uzIn1l1v2/easeljs-0.7.1.min.js"></script>
<canvas id="canvas">Your browser doesn't have full HTML5 support.</canvas>

CSS

* {
    margin:0;
}
canvas {
    background:#6CF;
}

JavaScript

function init() {
    var stage = new createjs.Stage("canvas");
    
    function randomImage(arr) {
        return new createjs.Bitmap(arr[Math.floor(Math.random() * arr.length)]);
    }

    var Graphic = function (blockWidth, blockHeight, topLeft, topCenter, topRight, middleLeft, middleCenter, middleRight, bottomLeft, bottomCenter, bottomRight) {
        if (typeof topCenter === "undefined") {
            topCenter = topRight = middleLeft = middleCenter = middleRight = bottomLeft = bottomCenter = bottomRight = topLeft;
        }
        return {
            createBlockAt: function (x, y, blockGroupWidth, blockGroupHeight, clsdir, alpha) {
                for (var blockY = 0; blockY < blockGroupHeight / blockHeight; blockY++) {
                    for (var blockX = 0; blockX < blockGroupWidth / blockWidth; blockX++) {
                        if (blockY == 0 && blockX == 0) {
                            var obj = randomImage(topLeft);
                        }
                        if (blockY == 0 && blockX != 0 && blockX != (blockGroupWidth / blockWidth - 1)) {
                            var obj = randomImage(topCenter);
                        }
                        if (blockY == 0 && blockX == (blockGroupWidth / blockWidth - 1)) {
                            var obj = randomImage(topRight);
                        }

                        if (blockY != 0 && blockY != (blockGroupHeight / blockHeight - 1) && blockX == 0) {
                            var obj = randomImage(middleLeft);
                        }
                        if (blockY != 0 && blockY != (blockGroupHeight / blockHeight - 1) && blockX != 0 && blockX != (blockGroupWidth / blockWidth - 1)) {
                            var obj = randomImage(middleCenter);
                        }
                        if (blockY != 0 && blockY != (blockGroupHeight / blockHeight - 1) && blockX == (blockGroupWidth / blockWidth - 1)) {
                            var obj =...