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

[shivajikobardan]

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

 

[Antero360]

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

Hey there,
Given the fact that there is this in the code

it seem that ^ at this point x and y contain the starting values of the object. Further down, towards the bottom, you see this function

You can see that x and y are being reset here, to whatever their current values are plus whatever dx and dy are. Now, based off of the snippet of code you posted, you are checking whether or not x and y meet some criteria in order to set dx and dy. At this point, one can deduct that dx and dy are the changes in the x direction and the y direction, respectively.

 

[Deleted member 2829]

To just answer the posted question, x is the horizontal position of the center of the ball, and y the vertical position of the center. relative to the upper left corner of the canvas.
How that relates to your picture, or why you need a picture to clarify this, I have no clue at all.