JSFiddle - React, Tailwind, and code Playground

by andersand

HTML

<canvas width="400" height="300" id="can"></canvas>

CSS

body {
  background-color: #242623;
}
canvas {
  background-color: #333;
}

JavaScript

const can = document.getElementById("can")
const ctx = can.getContext("2d")
const pi2 = Math.PI * 2

const numCircles = 10

const colr = ["red", "hsl(200,100%,70% )", "green", "yellow", "purple", "orange", "white", "black", "gray", "brown"]

let circles = []

for(let i=0; i<numCircles; i++) {
	let r = 5 + Math.random() * 25
  let cx = Math.floor( Math.random() * colr.length)
	circles.push({ 
  	x: Math.random() * (400 - r*2),
    y: Math.random() * (300 - r*2),
    r: r,
    c: colr[cx]
  })
}

for(let c of circles) {
  ctx.fillStyle = c.c
  ctx.beginPath()
  ctx.ellipse(c.x, c.y, c.r, c.r, 0, 0, pi2)
  ctx.fill()
}