Struggling to assign random colors to each circle in my canvas. Currently, they all have the same color that changes upon refresh.
I'm aiming for unique colors on each circle but my attempts have been unsuccessful so far.
Check out my code below:
var can = document.getElementById('canvas');
can.width = window.innerWidth;
can.height = window.innerHeight;
var ctx = can.getContext('2d');
function Circle(centerX, centerY, speedX, speedY, radius) {
this.centerX = centerX;
this.centerY = centerY;
this.speedX = speedX;
this.speedY = speedY;
this.radius = radius;
this.draw = function () {
ctx.beginPath();
ctx.arc(this.centerX, this.centerY, this.radius, 0, Math.PI * 2);
ctx.fill();
}
this.update = function () {
this.ctx.fillStyle =
this.centerX += this.speedX;
if (this.centerX + this.radius > innerWidth || this.centerX - this.radius < 0) {
this.speedX = -this.speedX;
}
this.centerY += this.speedY;
if (this.centerY + this.radius > innerHeight || this.centerY - this.radius < 0) {
this.speedY = -this.speedY;
}
this.draw();
}
}
var circleArray = [];
var circleAmount = 45;
for (var i = 0; i < circleAmount; i++) {
var centerX = Math.random() * window.innerWidth;
var centerY = Math.random() * window.innerWidth;
var radius = (Math.random() * 24) + 3;
ctx.fillStyle = 'rgba(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + ".5" + ')';
var speedY = (Math.random() - 0.5) * 3;
var speedX = (Math.random() - 0.5) * 6;
circleArray.push(new Circle(centerX, centerY, speedX, speedY, radius));
}
function draw() {
requestAnimationFrame(draw);
ctx.clearRect(0, 0, innerWidth, innerHeight);
for(var i = 0; i < circleArray.length; i++){
circleArray[i].update();
}
}
draw();