JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<canvas height="500px" width="400px" id="myCanvas"></canvas>

CSS

canvas {
    background:transparent;
}

JavaScript

var col = ['Crimson', ' Coral', 'DarkMagneta', 'Purple', 'DarkKhaki', 'DarkOliveGreen', 'DarkCyan', 'Beige', 'DarkSeaGreen', 'DarkRed', 'DarkRed', 'DarkSalmon', 'Khaki', 'GoldenRod', 'GreenYellow', 'Gainsboro', 'HoneyDew', 'Navy', 'Yellow', 'Red', 'Lavender', 'Green']
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var pace = [1.1, 2.2, 3.3, 4.4];

    function makeBubble(Xpos, Ypos, ra, color) {
        var cenX = canvas.width / Xpos;
        var cenY = canvas.height / Ypos;
        context.arc(cenX, cenY, ra, 0, 2 * Math.PI, false);

        context.fillStyle = color;
        context.fill();
        context.closePath();
        context.beginPath();
        context.stroke();
    }

    function makeBubbles() {
        for (var i = 1; i < 40; i++) {
            var rnd = Math.floor((Math.random() * 30) + 10);
            var pick = Math.floor(Math.random() * 22);
            var pickX = Math.floor(Math.random() * 3);
            var pickY = Math.floor(Math.random() * 3);
            makeBubble(pace[pickX], pace[pickY], rnd, col[pick]);
        }
    }
    makeBubbles();