JSFiddle - React, Tailwind, and code Playground

by raxxla

HTML

<canvas id="canvas" width="400" height="400" style='border:1px solid;'></canvas>

JavaScript

var context = document.getElementById('canvas').getContext('2d');
var ball = [];

for (var i=0; i<10; i++){ // [x, y, r, vx, vy]
  var r = 10+20*Math.random();
  ball[i] = [ Math.random()*(canvas.width-2*r)+r,
              Math.random()*(canvas.height-2*r)+r,
              r,
              20*Math.random()*Math.pow(-1, Math.round(Math.random()+1)),
              20*Math.random()*Math.pow(-1, Math.round(Math.random()+1)) ];
}

setInterval(draw,40);

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  for (var i=0; i<ball.length; i++){
    ball[i][0] += ball[i][3];
    ball[i][1] += ball[i][4];
    if (ball[i][0]<ball[i][2]) {
      ball[i][0]=2*ball[i][2]-ball[i][0];
      ball[i][3]=-ball[i][3];
    }
    if (ball[i][0]>canvas.width-ball[i][2]) {
      ball[i][0]=2*(canvas.width-ball[i][2])-ball[i][0];
      ball[i][3]=-ball[i][3];
    }
    if (ball[i][1]<ball[i][2]) {
      ball[i][1]=2*ball[i][2]-ball[i][1];
      ball[i][4]=-ball[i][4];
    }
    if (ball[i][1]>canvas.height-ball[i][2]) {
      ball[i][1]=2*(canvas.height-ball[i][2])-ball[i][1];
      ball[i][4]=-ball[i][4];
    }
    context.beginPath();
    context.arc(ball[i][0], ball[i][1], ball[i][2], 0, 2*Math.PI);
    context.stroke();
  }
}