function checkBoundaryCollision() {
if (x - ballRadius <= 0 || x + ballRadius >= canvasWidth) {
dx = -dx;
}
if (y - ballRadius <= 0 || y + ballRadius >= canvasHeight) {
dy = -dy;
}
}
Full code here: https://codepen.io/pelko/pen/gOjXdaq
X and Y are the center positions of the circle. Take a look at the following diagram:
If you didn’t account for ballRadius on the left/top/right/bottom edges, the ball would go beyond the boundaries until the center point of (x, y) hits the edge instead. We don’t want that, for that’s not how we would expect a ball to bounce in real life. In real life, the moment an edge of the ball hits a surface, the ball will compress and start to bounce back.
thank you for the information
How are you finding the canvas for drawing and building out some of these interactions? 
Not sure if you have seen this or need it, but I have a bunch of Canvas-related content here:
kirupa…programming doesn’t enter my head…I think too much and go to much details and it causes slow learning and giving up…Any suggestions?
