JSFiddle - React, Tailwind, and code Playground

by jaibuu

HTML

<canvas id="c" width="200" height="200" style="border:1px solid red;"></canvas>

JavaScript

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var my_gradient = ctx.createLinearGradient(0, 0, 0, 300);

window.requestAnimationFrame = function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (f) {
        window.setTimeout(f, 1e3 / 60);
    }
}();


window.cancelAnimationFrame = function () {
    return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame || function (f) {
        window.setTimeout(f, 1e3 / 60);
    }
}();
var randompos = {};
RandomPosition();

function DrawBackround() {
    ctx.globalAlpha = 1;
    ctx.clearRect(0, 0, 200, 200);
    my_gradient.addColorStop(0, '#002EB8');
    my_gradient.addColorStop(1, '#4D6DCD');
    ctx.fillStyle = my_gradient;
    ctx.fillRect(0, 0, 200, 200);
}

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

var counter=0;
function RandomPosition() {
    if(++counter % 10){
        window.requestAnimationFrame(RandomPosition);
        return false;
    }
    DrawBackround();
    ctx.globalAlpha = 0.5;
    var dt = 10;
    for (i = 0; i < 3; i++) {
        n = Math.floor(Math.random() * 8) + 1;
        switch (n) {
            case 1:
                randompos.x = 0;
                randompos.y = dt; //12
                break;
            case 2:
                randompos.x = dt;
                randompos.y = dt; //1
                break;
            case 3:
                randompos.x = dt;
                randompos.y = 0; //3
                break;
            case 4:
                randompos.x = dt;
                randompos.y = -dt; //4
                break;
  ...