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;
}

JavaScript

// BAD BAD GLOBALS


var circleR = 10;

var padding = 50;


// Shorthand for $( document ).ready()

    console.log( "ready!" );
	
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");

// TODO read from canvas
var cWidth = c.width();
var cHeight = c.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();
}