HTML5 canvas collision question

Question

I have some code:

https://code.sololearn.com/WFF3N151BDBi/#html

I am trying to keep this circle on above the rectangle on the bottom of the screen. I am trying to make that bottom rectangle in-passable by the circle that I move with my mouse. I am having a difficult time trying to make up the math to make this possible.

Any help is greatly appreciated. As well as tips on my code to make things more efficient.

Answer 1

set an if-statement like...
if(circle.y<rect.y){
mouseCanMoveCircle();
}
else{
mouseCannotMoveCircle();
}

Answer 2

mouseCan(not)MoveCIrcle does not seen to be a function. Can you elaborate ?

Answer 3

....
function handeler(event){
var x= event.clientX;
var y= event.clientY;
// set horizontal bounds
circle1.x= Math.max(circle1.radius, Math.min(rect1.w+rect1.x-circle1.radius, x));
// set vertical bounds
circle1.y= Math.max(circle1.radius, Math.min(rect1.h+rect1.y-circle1.radius, y));
}
....