What does the x and y value mean here? Can you show in a figure?

[polaryeti]

 

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

[kicken]

x is the center of the ball horizontally, y is the center of the ball vertically.

[Barand]

The closest x or y can be to the edge is the radius of the ball. When either of them reach that position, change direction.