SAP River RDE Flowers

Create the SAP River RDE Flowers

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

var circleRXL = 50;
var circleRM = 10;
var circleRS = 5; // circle small
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 < 15; 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
    }, true);
}

// big white fluffy circles
for (i = 0; i < 8; i++) {
    var randX = Math.random() * (cWidth - 2 * padding) + padding;
    var randY = Math.random() * (cHeight / 2 - 2 * padding) + cHeight / 2 + padding;
    var randR = Math.random() * circleRXL + circleRXL / 2; 
    _drawFluffyCircle(ctx, randX, randY, randR, '255,255,255');    
}

function drawRandomCircles(ctx, color, small) {

    // 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;
    if(small) {
     randR = Math.random() * circleRS + circleRS / 2;
    } else {
     randR = Math.random() * circleRM + circleRM / 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,...