1. const canvas = document.getElementById('canvas');
2. const ctx = canvas.getContext('2d');
3. var tablica = [];
4. var radius = 20;
5.  
6. function circle(x, y, radius, color1, color2, color3) {
7.         this.x = x;
8.         this.y = y;
9.         this.radius = radius;
10.         this.color1 = color1;
11.         this.color2 = color2;
12.         this.color3 = color3;
13. }
14.  
15. function move(x, y, radius, color1, color2, color3, i, speedX, speedY) {
16.         this.x = x;
17.         this.y = y;
18.         this.radius = radius;
19.         this.color1 = color1;
20.         this.color2 = color2;
21.         this.color3 = color3;
22.         this.i = i;
23.         this.speedX = speedX;
24.         this.speedY = speedY;
25.  
26.         if (this.x-radius < 0 || this.x+radius > canvas.width) {
27.                 this.speedX = -(this.speedX);
28.         }
29.         if (this.y-radius < 0 || this.y+radius > canvas.height) {
30.                 this.speedY = -(this.speedY);
31.         }
32.  
33.         this.x = this.x + this.speedX;
34.         this.y = this.y + this.speedY;
35.  
36.         tablica[this.i].x = this.x;
37.         tablica[this.i].y = this.y;
38.         tablica[this.i].speedX = this.speedX;
39.         tablica[this.i].speedY = this.speedY;
40.  
41.         setTimeout(move, 25, this.x, this.y, this.radius, this.color1, this.color2, this.color3, this.i, this.speedX, this.speedY);
42. }
43.  
44. function aktual() {
45.         ctx.clearRect(0, 0, canvas.width, canvas.height);
46.         for (var i=0; i<tablica.length; i++) {
47.                 ctx.beginPath();
48.                 ctx.arc(tablica[i].x, tablica[i].y, tablica[i].radius, 0, 2*Math.PI);
49.                 ctx.fillStyle = "rgba(" + tablica[i].color1 + "," + tablica[i].color2 + "," + tablica[i].color3 + "," + "1)";
50.                 ctx.fill();
51.                 ctx.strokeStyle = "rgba(" + (tablica[i].color1-100) + "," + (tablica[i].color2-100) + "," + (tablica[i].color3-100) + "," + "1)";
52.                 ctx.stroke();
53.         }
54.         setTimeout(aktual, 1);
55. }
56.  
57. for (var i=0; i<75; i++) {
58.         var x = -10;
59.         var y = -10;
60.         while (x-radius < 0 || x+radius > canvas.width) {
61.                 var x = Math.floor((Math.random()*canvas.width)+0);
62.         }
63.         while (y-radius < 0 || y+radius > canvas.height) {
64.                 var y = Math.floor((Math.random()*canvas.height)+0);
65.         }
66.         var color1 = Math.floor(Math.random()*255);
67.         var color2 = Math.floor(Math.random()*255);
68.         var color3 = Math.floor(Math.random()*255);
69.         var speedX = Math.floor(Math.random()*10-5);
70.         var speedY = Math.floor(Math.random()*10-5);
71.         var Circle = new circle(x, y, radius, color1, color2, color3);
72.         ctx.beginPath();
73.         ctx.arc(x, y, radius, 0, 2*Math.PI);
74.         ctx.fillStyle = "rgba(" + color1 + "," + color2 + "," + color3 + "," + "1)";
75.         ctx.fill();
76.         ctx.strokeStyle = "rgba(" + (color1-100) + "," + (color2-100) + "," + (color3-100) + "," + "1)";
77.         ctx.stroke();
78.         tablica.push(Circle);
79.         move(x, y, radius, color1, color2, color3, i, speedX, speedY);
80. }
81.  
82. aktual();