How do i make my red bouncy ball change color on collision?

Question

As of right now my ball just stays red and wont change to another color when it hits walls.
How do I go from the color red to green when I hit the top or bottom of canvas and yellow when I hit the sides of the canvas?

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var ballRadius = 10;
var R = "rgba(255,0,0,0.9)";
var G = "rdgba(0,255,0,0.9)";
var Y = "rgba(0,255,255,0.9)";

function drawBall(){
ctx.beginPath();
ctx.arc(x,y,ballRadius,0,Math.PI*2);
ctx.fillStyle ="red";
ctx.stroke();
ctx.closePath();
}

function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
drawBall();
x += dx;
y += dy;
ctx.fill();
if(x + dx > canvas.width || x + dx < ballRadius){
dx=-dx;
ctx.fillStyle = 'yellow';

}
if(y + dy > canvas.height || y + dy < ballRadius){
dy=-dy;
ctx.fillStyle = 'green';
}

}

setInterval(draw, 10);

Answer 1

Just move the line:

ctx.fillStyle ="red";

... from the function drawBall, outside ( next to initializations ): actually the fill color is redefined to red each time the ball is drawn ^^
You can also move the drawBall() call at end in function draw() ( else new color/position will be applied on next turn, with a 10ms delay :P )

Answer 2

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var ballRadius = 10;
var R = "rgba(255,0,0,0.9)";
var G = "rdgba(0,255,0,0.9)";
var Y = "rgba(0,255,255,0.9)";

ctx.fillStyle ="red"; // set to red at start

function drawBall(){
ctx.beginPath();
ctx.arc(x,y,ballRadius,0,Math.PI*2);
// ctx.fillStyle ="red"; // don't set fill color here ^^
ctx.stroke();
ctx.closePath();
}

function draw(){

/* tests and color change first */

if(x + dx > canvas.width || x + dx < ballRadius){
dx=-dx;
ctx.fillStyle = 'yellow';

}
if(y + dy > canvas.height || y + dy < ballRadius){
dy=-dy;
ctx.fillStyle = 'green';
}

/* draw ball code */

ctx.clearRect(0,0,canvas.width,canvas.height);
drawBall();
x += dx; // update pos after drawBall()?
y += dy;
ctx.fill();
}

setInterval(draw, 10);

Answer 3

It doesn't seem to be working. Could you perhaps show me what you mean. I am not sure I completely understand where you are saying to move It too.

Answer 4

Thank you, this worked!

The (x+=dx, y+=dy) update position after drawBall is repainting the ball in a new location every 10 milliseconds due to the setInterval(draw,10). So, it appears that the ball shoots across the screen even though its just an image being redrawn over and over again in that direction.