JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="578" height="400"></canvas>

JavaScript

function byId(e){return document.getElementById(e)}
window.addEventListener('load', onDocLoaded, false);

var shapeList = [];

function onDocLoaded()
{
	var i, n=10;
	var canvas = byId('myCanvas');
	
	for (i=0; i<n; i++)
	{
		shapeList[i] = new circle_t(Math.random()*578, Math.random()*400, Math.random()*30 + 20);
		shapeList[i].draw(canvas);
	}
	
	for (i=0; i<n-1; i++)
		draw_line2(shapeList[i].origX, shapeList[i].origY, shapeList[i].radius, shapeList[i+1].origX, shapeList[i+1].origY, shapeList[i+1].radius);
}	

var shape_t = function(x,y)
{
	this.origX = (x==undefined ? 0 : x);
	this.origY = (y==undefined ? 0 : y);
}
shape_t.prototype =
{
	origX:0, origY:0, typeString:'shape',
	setPos: function(x,y){this.x=x;this.y=y;},
	setType: function(typeString){this.typeString = typeString;},
	toString: function(){return this.typeString + " - " + this.origX + "," + this.origY;},
	draw: function(canElem){},
};

function circle_t(x,y,radius)
{
	this.origX = (x==undefined ? 0 : x);
	this.origY = (y==undefined ? 0 : y);
	this.radius = (radius==undefined ? 10 : radius);
	this.setType("circle");
}
circle_t.prototype = new shape_t();
circle_t.prototype.constructor = circle_t;
circle_t.prototype.draw = function(canElem, color)
{
	var ctx = canElem.getContext('2d');
	var col = 'black';
	if (color != undefined)
		col = color;
	drawCircle(this.origX, this.origY, this.radius, ctx, col);
}

circle_t.prototype.setRadius = function(radius)
{
	if (radius != undefined)
		this.radius = radius;
}

function drawCircle(x, y, radius, ctx, col)
{
	ctx.save();
	if (col == undefined)
		col = 'black';
	ctx.strokeStyle = col;
	ctx.lineWidth = 1;
	ctx.beginPath();
	ctx.arc(x,y,radius,(Math.PI/180)*0, (Math.PI/180)*360, false);
	ctx.stroke();
	ctx.closePath();
	ctx.restore();
}

// define a vec2 class to make vector maths easier (simpler to read)
function vec2(x,y)
{
	this.length = function()
	{
		return Math.sqrt((this.x * this.x) + (this.y*this.y));
	}
	this.normalize = function()
	{
		var scale =...