How do you find a circle that just disappeared and how do you put it back?

I am having a problem in Processing JS where my circle is not appearing.

The code is as follows:

var circleY;
var circleX;
stroke(0, 0, 0);
var bob = function(text1,x1,y1){
    noFill();
    var textWidthValue = textWidth(text1); // Get the width of the text
    stroke(0, 0, 0);
    var circleDiameter = max(circleDiameter, textWidthValue + 40);
    var circleRadius = circleDiameter/2;
    circleX = x1;
    circleY = (3 / 5) * height - circleRadius;
    line(x1,y1,x1,y1-(3 / 5) * height);
    stroke(0, 0, 0);
    // Calculate text width and adjust circle diameter
    circleDiameter = max(circleDiameter, textWidthValue + 40); 
    circleRadius = circleDiameter/2;
    // Ensure circle can fit text
    
    stroke(0, 0, 0);
    // Draw the circle
    fill(255, 0, 0);
    ellipse(circleX, circleY, circleDiameter, circleDiameter);
    
    fill(255, 0, 0); // Set text color to red
    textAlign(CENTER, CENTER);
    
    // Draw the text centered inside the circle
    text(text1, circleX, circleY);
};
bob("Bob is Your uncle",256,784);
text("circleX, circleY", circleX, circleY);

I still have no answers on Khanacademy!

Also, I have asked on Khanacademy and gotten no answers as of yet. if you want, you can see it on: https://www.khanacademy.org/computer-programming/skill-tree/5042474092969984

I figured out that if I remove the var from the second definition of circleX and circleY I can update instead of redefining the variables. Now the debug text is entirely gone and (probably) on top of the circle! yay! I used to be confused, now there is no clear way forward!

I don't fully understand the Khan Academy environment (I think it's using processing-js), but apparently it provides a draw() function and a canvas for you out of the box. Generally in P5 you need draw(), setup() or both to make a P5 app:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  bob("Bob is Your uncle", 200, 350);
}

function bob(text1, x1, y1) {
  const textWidthValue = textWidth(text1);
  const circleDiameter = max(50, textWidthValue + 40);
  const circleRadius = circleDiameter / 2;

  const circleX = x1;
  const circleY = (3 / 5) * height - circleRadius;
  line(x1, y1, x1, circleY);

  fill(255, 0, 0);
  ellipse(circleX, circleY, circleDiameter, circleDiameter);

  fill(255);
  textAlign(CENTER, CENTER);
  text(text1, circleX, circleY);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js"></script>

This version works in Khan Academy, which apparently also prohibits const and let:

function bob(text1, x1, y1) {
  var textWidthValue = textWidth(text1);
  var circleDiameter = max(50, textWidthValue + 40);
  var circleRadius = circleDiameter / 2;

  var circleX = x1;
  var circleY = (3 / 5) * height - circleRadius;
  line(x1, y1, x1, circleY);

  fill(255, 0, 0);
  ellipse(circleX, circleY, circleDiameter, circleDiameter);

  fill(255);
  textAlign(CENTER, CENTER);
  text(text1, circleX, circleY);
}

background(220);
bob("Bob is Your uncle", 200, 350);

The main fixes here are:

1. bob("Bob is Your uncle", 256, 784); looks off canvas--784 pixels on the Y axis.
2. var circleDiameter = max(circleDiameter, textWidthValue + 40); does not work because circleDiameter is undefined, so you wind up with NaN as the diameter.

Generally speaking, you may be coding too quickly. If you write a large chunk of code all at once, and it doesn't work, there's no obvious entry point for debugging. Slow down and build incrementally, running the code and verifying that it works after every line you change.

For example, start with just getting a simple circle or line in the middle of the screen. Then add text colors step by step, running and checking as you go. Avoid adding functions like bob() until you have things working in the main top level, then factor it out and make sure parameters are properly defined.

Start with this:

background(220);
fill(255, 0, 0);
ellipse(100, 100, 100, 100);

As you introduce variables, you'd normally use print() to see what their values are if something isn't working. But it seems Khan Academy doesn't show logs, which is a huge problem. I'd advise using https://editor.p5js.org instead.