Canvas Colour

Question

I have given vanilla Javascript another try, how can I make the circle be one of the colours from the array (fill not stroke)

edit: Another problem, why isn't clearRect working?

https://code.sololearn.com/WKOqwX3cLJDV/?ref=app

Answer 1

Like Calvin mentioned, if you just want the ball showing with no trail and nothing filling behind it, use beginPath and closePath.

Like this:
show(){
c.fillStyle = cols[this.col];
c.beginPath();
c.arc(this.x, this.y, this.w, Math.PI*2, false);
c.closePath();
c.fill();
}

Answer 2

There were 2 lines to fix when I looked at it.

1: From: this.col = Math.floor(Math.random = cols.length);
To: this.col = Math.floor(Math.random() * cols.length);

You want a random index number. You don't want to replace the Math.random method with something like 5.

2: From: c.fillStyle = this.col;
To: c.fillStyle = cols[this.col];

You want to get a colour name like 'red' and not a number for fillStyle. Assuming you want the colour index in this.col, this line would have to change too.

This is the complete js code that I got working for easy copy and pasting:

//alert("I have not used vanilla Javascript in a very long time, this will be interesting!");

let cols = ["red", "green", "blue", "purple", "cyan", "lightblue", "lightgreen"]

let balls = [];

window.onload=()=>{
let canvas = document.querySelector("canvas");

let c = canvas.getContext('2d');

class Ball{
constructor(x, y, w, dir){
this.x = x;
this.y = y;
this.w = w;
this.col = Math.floor(Math.random() * cols.length);
this.xSpeed = 5;
this.ySpeed = 5;
this.dir = dir;
}

show(){
c.fillStyle = cols[this.col];
c.arc(this.x, this.y, this.w, Math.PI*2, false);
c.fill();
}

move(){
this.x += this.xSpeed;
this.y += this.ySpeed;
}

}

let b = new Ball(100, 100, 30);

function update(){

requestAnimationFrame(update);
c.clearRect(0, 0, innerWidth, innerHeight);

b.show();
b.move();

//window.addEventListener("touchstart", )
}

update();
}

Answer 3

c.beginPath();

Answer 4

Josh Greig Calviղ I have added collision detection to the program, although now it is all messed up. Can you help?

Answer 5

Thanks Josh Greig , does anyone know why clearRect is not working?

Answer 6

Martin Can you help? I know you are good at this