JSFiddle - React, Tailwind, and code Playground

by Denise Nepraunig

HTML

<div id="content">
    <canvas id="myCanvas" width="640" height="480" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}
#content {
    text-align: center;
    margin-top: 25px;
}

JavaScript

// BAD BAD GLOBALS
var circleR = 10;
var padding = 50;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var cWidth = $("#myCanvas").width();
var cHeight = $("#myCanvas").height();

// fixed color gradient
drawBackground(ctx);

var i = 0;

// white circles
for (i = 0; i < 25; i++) {
    drawRandomCircles(ctx, {
        red: 255,
        green: 255,
        blue: 255,
        transperency: 0.7
    });
}

// red circles
for (i = 0; i < 5; i++) {
    drawRandomCircles(ctx, {
        red: 255,
        green: 0,
        blue: 0,
        transperency: 0.4
    });

}

// green circles
for (i = 0; i < 3; i++) {
    drawRandomCircles(ctx, {
        red: 46,
        green: 189,
        blue: 37,
        transperency: 0.4
    });
}


function drawRandomCircles(ctx, color) {

    // circles should be in the bottom area
    var randX = Math.random() * (cWidth - 2 * padding) + padding;
    var randY = Math.random() * (cHeight / 2 - 2 * padding) + cHeight / 2 + padding;
    var randR = Math.random() * circleR + circleR / 2;

    var circlearea = {
        x: randX,
        y: randY,
        r: randR
    };


    _drawCircle(ctx, circlearea, color);
}

function drawBackground(ctx) {
    var grd = ctx.createLinearGradient(0, 0, 0, cHeight);

    grd.addColorStop(0, "#A6E0FF");
    grd.addColorStop(0.8, "#EFEBE2");

    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, cWidth, cHeight);
}

function _drawCircle(ctx, circle, color) {
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI, false);

    var _color = 'rgba(' + color.red + ',' + color.green + ',' + color.blue + ',' + color.transperency + ')';
    ctx.fillStyle = _color;
    ctx.fill();
}