JSFiddle - React, Tailwind, and code Playground

by fragphace

HTML

<div id="counter-wrap"></div>

<div id="canvas-wrap">
    <canvas id="canvas"></canvas>
</div>

CSS

body {
    background: #555;
    color: #fff;
    font-family: Arial, sans-serif;
    width: 300px;
    height: 300px;
}

#canvas-wrap {
    position: relative;
    display: block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

#canvas-wrap canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: block;
}

#canvas-wrap {
    width: 300px;
    height: 300px;
}

JavaScript

(function () {
    var resize = function (width, height) {
        var wrap = document.getElementById('canvas-wrap');
        wrap.style.width = width;
        wrap.style.height = height;
    };
    
    var draw = function () {
        var wrap = document.getElementById('canvas-wrap');
        wrap.innerHTML = '';
        for (var i = 0; i < 100; i += 1) {
            var canvas = document.createElement('canvas');
            wrap.appendChild(canvas);
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'red';
            ctx.rect(0, 0, 100, 100);
            ctx.fill();
        }        
    };
    
    var resizeDrawAndWait = function (width, height, delay, callback) {
        resize(width, height);
        draw();
        setTimeout(function () {
            callback();
        }, delay);
    };
    
    var loop = function (start, stop, step, fn, callback) {
        var stepFn = function () {
            if (start >= stop) {
                return callback();
            }
            start += step;
            fn(start, function () {
                stepFn();
            });
        };
        stepFn();
    };
    
    loop(1, 10, 1, function (index, callback) {
        loop(10, 90, 0.01, function (width, cb) {
            resizeDrawAndWait(width + '%', width + '%', 1, cb);
        }, callback);
    }, function () {
        document.body.innerHTML = 'DONE!';
    });  
        
})();