Javascript Canvas border collision

Question

I have some code here:

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

I am trying to make the moving square not go past the edges. I understand how to do it with the square not having user input but, I can not figure out. If you can help me that would be wonderful.

If you also have some time I would really like if you could help me with my other question.
(https://www.sololearn.com/Discuss/1308708/html5-canvas-collision-question)
That has still yet to be answered. Thank for any help in the future.

Answer 1

.....
function init(){
rect1.upDate();
if(rightPress){
rect1.x += Math.min(rect1.dx,window.innerWidth-rect1.w-rect1.x);
}
if(leftPress){
rect1.x -= Math.min(rect1.dx, rect1.x);
}
......