JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<canvas id='canava'></canvas>

CSS

* {
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

JavaScript

const docWidth = window.innerWidth
		, docHeight = window.innerHeight

const canava = document.getElementById('canava')

canava.width = docWidth
canava.height = docHeight

const c = canava.getContext('2d')

c.ball = function (x, y, r, color) {
  this.beginPath();
	this.arc(x, y, r, 0, 2*Math.PI);
	this.fillStyle = color;
  this.fill();
} 

// JSus Dev @Jsusdevs


function CreateBall ({ x = docWidth / 2
										 , y = docHeight / 2
                     , xf = (Math.random() * 2) + 0.4
                     , yf = (Math.random() * 2) + 0.4
                     , r = 10
                     , color = '#fa0' 
                     , }) {
	
  this.ball = {
  	x,
    y,
    xf,
    yf,
    r,
  	color
  }
  
  this.render = () => {
	
  	this.ball.x += this.ball.xf
  	this.ball.y += this.ball.yf
  
  	c.ball(this.ball.x
    		 , this.ball.y
         , this.ball.r
         , this.ball.color )

		if (this.ball.y < this.ball.r) {
  		this.ball.yf = -this.ball.yf
  	}
  
    if (this.ball.x > docWidth - this.ball.r) {
      this.ball.xf = -this.ball.xf
    }

    if (this.ball.x < this.ball.r) {
      this.ball.xf = -this.ball.xf
    }

    if (this.ball.y > docHeight - this.ball.r) {
      this.ball.yf = -this.ball.yf
    }
  }   

}

const color = () => {
  const R = (parseInt(Math.random() * 11) + 4).toString(16)
  		, G = (parseInt(Math.random() * 11) + 4).toString(16)
			, B = (parseInt(Math.random() * 11) + 4).toString(16)    
  return `#${R}${G}${B}`
}

const Balls = Array(150).fill(1).map(() => {
	return new CreateBall({ color: color() })
})

canava.addEventListener('click', e => {
	Array(20).fill(1).map(() => {
		Balls.push(new CreateBall({ 
    		color: color(), 
      	x: e.pageX,
        y: e.pageY
      }))
	})
})


setInterval(() => {
	
  c.globalAlpha = 0.08
	c.fillStyle = '#000'
	c.fillRect(0,0, docWidth, docHeight)
  
  c.globalAlpha = 1
	Balls.map(({render}) => render())

}, 1)