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